CSS text-overflow属性,修剪文本
text-overflow属性
当HTML文档中某个元素的文本太长导致文本溢出怎么办?可以使用CSS中的text-overflow属性来对文本进行修剪。而且可以根据不同的属性值修剪成不同的样式。
属性值
属性值 | 描述 |
---|---|
clip | 单纯地对文本进行修剪 |
ellipsis | 以省略号的形式显示被修剪的文本 |
text-overflow属性实例代码,及在线编辑器
<p class='to1'>这个段落设置的text-overflow的属性值为clip,注意,文本需要足够长,效果才能更明显</p>
<p class='to2'>该段落设置的text-overflow的属性值为ellipsis,段落超出容器范围的将以省略号表示。</p>
<style>
.to1{white-space:nowrap;overflow:hidden;text-overflow:clip;width:50%;border:1px solid skyblue;}
.to2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:50%;border:1px solid skyblue;}
</style>