CSS 中有
一个非常实用的
属性 text-overflow,可以用来处理
文字超出容器的情况。它可以将超出容器的
文字自动省略号,并
显示部分文本。 p >
text-overflow 这个
属性设置在超出文本框的元素上,一般是被设置宽度、高度或者 max-width、max-height。 p >
text-overflow 有两个值可以取:clip 和 ellipsis。 p >
clip p >
clip 的意思是将多余的文本直接剪切掉,只
显示文本框内的
内容。这种情况下,在超出容器的文本末尾不会
添加省略号或任何其他
内容。如果
内容太多,文本会折叠到下一行。 p >
ellipsis p >
ellipsis 的意思是将多余的文本用省略号表示,只
显示部分文本。这种情况下,在超出容器的文本末尾
添加省略号。如果
内容太多,省略号也会被省略掉。 p >
下面是
一个例子: p >
pre >
.
Box {
width: 200px;
height: 50px;
overflow: hidden;
text-overflow: ellipsis;
white-space:
Nowrap;
border: 1px solid #ccc;
}
style >
CSS 中有
一个非常实用的
属性 text-overflow,可以用来处理
文字超出容器的…… div >
在上面
代码中,首先在 .
Box 中设置了宽度和高度,然后设定了 overflow:hidden,让超出的部分隐藏起来。接着设置了 text-overflow:ellipsis 实现省略号,然后设定 white-space:
Nowrap,让文本不折行。最后
加上边框,方便观看。 p >
值得注意的是,text-overflow 只在元素设置了固定的宽度或最大宽度的情况下才能正常工作,也就是说,如果你没有设置宽度或最大宽度,text-overflow 是不会生效的。 p >
pre >