css文本省略号

Posted yanggb

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css文本省略号相关的知识,希望对你有一定的参考价值。

这里记录下如何用CSS实现单行、多行文本溢出容器的时候用省略号代替溢出部分。

单行文本溢出容器时显示省略号的CSS实现方法

/* 规定当内容溢出元素框(容器)时隐藏 */
overflow: hidden;
/* 规定当文本溢出包含元素(容器)出现省略号 */
text-overflow: ellipsis;
/* 规定段落中的文本不进行换行 */
white-space: nowrap;

要注意的是,因为是要在文本溢出容器时候显示省略号,因此容器是需要有固定的宽度的。

示例:我是想要省略号的文本,哈哈哈哈哈哈啊哈哈。

在上面的示例中,后面的85646464654495467417个哈哈哈都被省略成省略号了。

然后我们来对这些属性和值逐个分解。

overflow

overflow属性规定当内容溢出元素框时发生的事情。

描述
visible 默认值。内容不会被修剪,会呈现在元素框之外。
hidden 内容会被修剪,并且其余内容是不可见的。
scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承overflow属性的值,IE不支持这个值。

这里使用的是hidden。

text-overflow

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

描述
clip 默认值。修剪文本。
ellipsis 显示省略符号来代表被修剪的文本。
string 使用给定的字符串来代表被修剪的文本。

这里使用的是ellipsis,是显示省略号的重点。

white-space

white-space属性规定如何处理元素内的空白。

描述
normal 默认值。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似html中的<pre>标签。
nowrap 文本不会换行,文本会在在同一行上继续,直到遇到<br>标签为止。
pre-wrap 保留空白符序列,但是正常地进行换行。
pre-line 合并空白符序列,但是保留换行符。
inherit 规定应该从父元素继承white-space属性的值,IE不支持这个值。

这里使用的是nowrap。

多行文本溢出容器时显示省略号的CSS实现方法

overflow: hidden;
/* 用来限制在一个块元素显示的文本的行数。为了实现该效果,它需要组合其他的WebKit属性,比如下面的两个 */
-webkit-line-clamp: 3;
/* 必须结合的属性,将对象作为弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 必须结合的属性,设置或检索伸缩盒对象的子元素的排列方式,这里是垂直 */
-webkit-box-orient: vertical;

多行这个用的是Webkit的CSS扩展属性,因此只兼容Webkie内核的浏览器,实际场景基本用不上(我没有用过所以这么说,网上找的,嘻嘻)。

同时这些扩展属性也比较新,不知道有没有什么稀奇古怪的Bug(柠檬酸),已知的一个问题是即使末行文本未超出行的情况下也会出现省略号。因此建议还是想想别的折衷方法,比如修改页面布局配合其他CSS属性实现或用javascript实现。

 

"跟雨伞学做人,如果你不为别人挡风遮雨,谁又会把你高高举在头上。"

以上是关于css文本省略号的主要内容,如果未能解决你的问题,请参考以下文章

怎么用css实现多行文本省略?

CSS3如何实现超出指定文本以省略号显示效果

css文本省略号

手机网页里,一段文本超出显示省略号(…),这个CSS怎么设置

CSS和JS实现文本溢出显示省略号

css css用省略号截断文本