前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

text-overflow截断超长文字显示技巧

CSS里的text-overflow属性能用来控制超长溢出的文字内容的显示方式,超出的文字可以是直接截断、用省略号表示,或用自定义的字符替代。

text-overflow的起作用环境是在一个‘block’状态下的父元素容器里,它的inline子元素上水平方向不能换行(因为 ‘white-space: nowrap’)的情况下。要想text-overflow起作用,我们还不行能让‘overflow’的值为visible,因为我们的目的就是不想让超出的部分直接显示出来。

text-overflow不仅能控制文本尾部超出部分的显示方式,还可以控制文本开头超出部分的显示方式,比如:

text-overflow的几个有效值:

clip: 超出的部分直接截断

ellipsis: 超出的部分用省略号表示

自定义字符: 超出的部分用自定义字符表示

text-overflow用法例:

多行文本的超长截断问题

上面介绍的text-overflow,我们只能用在单行文本的超长溢出情况,当文本换行成多行时,它就不起作用了,但实际编程中,我们经常会遇到多行文本的超长溢出控制问题。比如,空间只能显示三行,希望在第三行结尾处超出的部分用省略号表示,怎么解决?

如果你使用的是谷歌浏览器,那这个问题相对容易解决,因为Webkit引擎里提供了一个控制多行文本超出溢出控制显示CSS属性:-webkit-line-clamp:N;

如果你需要在火狐浏览器上也有要求,那只能使用上面代码里的弥补方法,就是限定限制文字父元素的高度为行高的整数倍,然后超出的部分直接截断处理:

请点击此处输入图片描述其中max-height:=line-height*行数

切版 qieban(.cn)

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言