专注WEB开发 分享经验,沉淀知识

css代码片段之:css文字截取

 作者:chenxing  时间:2016-10-13 18:35  阅读:137  评论:

适用场景: 一般元素的长度相对固定,截取溢出长度部分的文字适用css截取。 截取明确的字数适用程序截取(php,js)

css文字截取片段

css文字截取代码片段:

.text-overflow{
    overflow:hidden; 
    white-space:nowrap; 
    text-overflow:ellipsis; 
    text-overflow: ellipsis;/* IE/Safari */ 
    -ms-text-overflow: ellipsis; 
    -o-text-overflow: ellipsis;/* Opera */ 
    -moz-binding: url("ellipsis.xml#ellipsis");/*FireFox*/ 
}

代码解释:

应用的元素必须是一个固定长度,只有又固定长度才有溢出产生。

white-space:设置如何处理元素内的空白

  • normal:默认处理方式。
  • pre: 用等宽字体显示预先格式化的文本,不合并文字间的空白距离,当文字超出边界时不换行。可查阅pre对象
  • nowrap: 强制在同一行内显示所有文本,合并文本间的多余空白,直到文本结束或者遭遇br对象。
  • pre-wrap: 用等宽字体显示预先格式化的文本,不合并文字间的空白距离,当文字碰到边界时发生换行。
  • pre-line: 保持文本的换行,不保留文字间的空白距离,当文字碰到边界时发生换行。

text-overflow:属性规定当文本溢出包含元素时发生的事情

  • clip:直接裁剪文本(默认)
  • ellipsis:用省略号代替裁剪的文本

文字溢出截取常常会在项目中应用,实现方式很多,除了可以通过css截取,也可以通过js,php等程序截取。

适用场景:

一般元素的长度相对固定,截取溢出长度部分的文字适用css截取

截取明确的字数适用程序截取(php,js)

除特别注明外,本网站所有文章均为作者原创。 或分享自己的编程经验,或探讨工作中的问题,或聊以人生趣事。 转载请注明出处来自 https://www.qiusuoweb.com/9.html

发布评论

 提交评论
有人回复时邮件通知我

 评论(0)

站长头像
chenxing(PHP攻城狮)

运营天数

总访问量

文章数量

-

-

-

交流群:157451741

新浪微博:草莽兴

 近期文章

一年时间又回到这里

 2019-07-27 16:54  119

PHP字符串转数组的三种场景

 2018-05-05 01:32  191

PHP如何遍历字符串?

 2018-05-04 00:56  1072

api接口常见的安全问题和解决方案

 2018-05-03 23:20  880

 最新评论

 心态炸裂: 03月24日 10:54
No3.blindcomfirm 多了一个l,望改正!!!
来源: 微信小程序获取input值的总结
 666666: 11月08日 13:49
66666
来源: 一年时间又回到这里
 花花草草: 10月14日 14:58
tp5不是已经提前开了吗
来源: _SESSION变量未定义?
 疯了: 10月10日 13:40
你好呀,我使用docker构建的 把整个项目给了777 并把runtime的所有者给了nginx php的运行者还是报错
来源: thinkphp5的mkdir() Permission denied问题探讨
 mesecretme: 09月30日 15:30
有个问题,有没有发现用redis保存session的话,session清空redis的key还没过期,会依然保留的,这是值变成空了
来源: php项目redis实现session共享案例
 旧久: 09月20日 07:24
感谢!
来源: 没备案域名如何在阿里云服务器上使用?