首先先了解几个css3属性:
1.文本溢出属性:
text-overflow:clip|ellipsis|string;
clip:剪短;
ellipsis:省略;
(所有主流浏览器都支持 text-overflow 属性。)
2.空白区属性:
white-space 属性设置如何处理元素内的空白。 这个属性声明建立布局过程中如何处理元素中的空白符。
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;
}
很明显单纯靠给div设置宽高是束缚不了文本的。
我们加上一条overflow:hidden;用以将文本超出部分隐藏掉。
继续加一条text-overflow: ellipsis;用以将文本超出部分以省略号表示;
这样就达到我们的效果了。另外网上面关于省略显示还包括加上一条white-space:Nowrap;用以禁止文本自动换行。
完全体代码如下:
text-overflow: ellipsis;
overflow: hidden;
white-space:Nowrap;
另外关于文本在div内自动换行:
在css代码中加入
word-wrap:break-word;
即可。
不过悲催的发现,当代码