使用text:overflow: ellipsis;的样式可以将溢出的文本自动裁剪,同时将裁剪部分标注省略号。使用方法如下:
<style>
div {
width: 200px;
background: lightgray;
white-space: nowrap; //强制设置元素内文本不换行
overflow: hidden; //溢出文本隐藏(不隐藏,就谈不上省略)
text-overflow: ellipsis;
}
</style>
<div>这里是一些文本,这里是一些文本,这里是一些文本,这里是一些文本,
这里是一些文本,这里是一些文本,这里是一些文本,这里是一些文本。</div>
执行结果:
需要注意的是,如果想要text-overflow: ellipsis;发生作用,必须同时指定元素的white-space和overflow样式,其中white-space规定文本不换行(nowrap),overflow规定溢出的部分隐藏(hidden),如果这两个样式任何一个缺失,都不会产生省略号效果。
text-overflow的默认值是clip,即切断文本但并不增加省略号。