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

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

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

适用场景: 一般元素的长度相对固定,截取溢出长度部分的文字适用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  38

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

 2018-05-05 01:32  171

PHP如何遍历字符串?

 2018-05-04 00:56  744

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

 2018-05-03 23:20  685

 最新评论

 pagenoname: 08月24日 18:51
兴哥牛B加油哈兴哥成功的道路上你又进了一步 哈哈
来源: 一年时间又回到这里
 iceyxm: 05月16日 15:00
谜一样的问题,我也遇到了,能改的权限都改了,文件目录属主也改了,然而并没有作用
来源: thinkphp5的mkdir() Permission denied问题探讨
 potatog: 03月27日 15:02
厉害了厉害了,搞了半天我,
来源: thinkphp利用PHPExcel导出数据实践
 aaa: 02月10日 17:02
受教
来源: thinkphp如何有效的设置session过期时间
 风格: 01月17日 09:35
我也是没解决
来源: thinkphp5的mkdir() Permission denied问题探讨
 小胡: 01月14日 14:28
非常感谢!使用非常便捷~
来源: thinkphp利用PHPExcel导出数据实践