css3——div内文字换行及省略显示

首先先了解几个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;

}

很明显单纯靠给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；