[分享]css3截断文字

CSS3可以通过textoverflow属性来截断长文本，使其在容器内显示更加美观，同时也提升了网页的用户体验。textoverflow属性支持以下值： 1. clip：截断文本并完全隐藏溢出的文本...

CSS3可以通过text-overflow属性来截断长文本，使其在容器内显示更加美观，同时也提升了网页的用户体验。text-overflow属性支持以下值：
1. clip：截断文本并完全隐藏溢出的文本。
2. ellipsis：截断文本并在末尾添加省略号。
3. string：截断文本并在末尾添加指定的字符串。
其中，ellipisis是最常用的一种截断方式，可以通过以下代码实现：

 p {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
} 

代码中，overflow:hidden属性可以隐藏掉超出容器范围的文本，white-space:nowrap可以使文本在一行内显示，而text-overflow:ellipsis则在超出容器范围时在末尾添加省略号。
如果要使用string值实现截断，则可以使用以下代码：

 p {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: '...';
} 

代码中，'...'即为要添加的截断符号，在超出容器范围时会自动添加到文本末尾。
需要注意的是，text-overflow属性只适用于单行文本，如果要截断多行文本，则需要使用JavaScript等其他方式实现。此外，IE浏览器需要使用-ms-text-overflow属性来替代text-overflow属性。
总之，CSS3的text-overflow属性为我们提供了一种简单方便的截断文本方式，可以使网页在显示长文本时更加美观。