首先先了解几个css3属性:
1.文本溢出属性:
text-overflow:clip|ellipsis|string;
clip:剪短;
ellipsis:省略;
(所有主流浏览器都支持 text-overflow 属性。)
2.空白区属性:
white-space 属性设置如何处理元素内的空白。 这个属性声明建立布局过程中如何处理元素中的空白符。
3.自动换行属性:
word-wrap允许长单词换行到下一行:
word-wrap: normal|break-word;
break-word 在长单词或 URL 地址内部进行换行。
code:
<div class="text">DSKSJFIHFHAJSFASSKSFKPOAKSFJASJFOIJQJFJFOIJQJFQWFPOKSAFPOPMOJPKAFPWQOKFP</div>
.text{
width: 200px;
height: 120px;
border: 1px solid black;
}
![](https://i-blog.csdnimg.cn/blog_migrate/84f9668bf4e82e0408637ed290173223.png)
很明显单纯靠给div设置宽高是束缚不了文本的。
我们加上一条overflow:hidden;用以将文本超出部分隐藏掉。
继续加一条text-overflow: ellipsis;用以将文本超出部分以省略号表示;
这样就达到我们的效果了。另外慕课网上面关于省略显示还包括加上一条white-space:nowrap;用以禁止文本自动换行。
完全体代码如下:
text-overflow: ellipsis;
overflow: hidden;
white-space:nowrap;
在css文件内写入以上就可以让文本保持一行,超出显示区域内容以省略号显示了。
另外关于文本在div内自动换行:
在css代码中加入
word-wrap:break-word;
即可。
不过悲催的发现,当代码
word-wrap:break-word;
overflow: hidden;
text-overflow: ellipsis;
同时存在时,文本会充满div并且超出部分被隐藏而不是以省略号显示,代码text-overflow: ellipsis;在此处并没有起作用。
按照网络上的说法,如果想让代码充满div并且超出部分以省略号显示,则更改代码为:
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
但实测没用....
所以总结为:
单行文本超出部分显示为省略号可以写为:
text-overflow: ellipsis;
overflow: hidden;
white-space:nowrap;
文本自动换行只需要替代代码为:
word-wrap:break-word;