[分享]css3单行省略

CSS3的单行省略是在Web开发中常用的一种文本处理方式。它可以使文字在超出容器宽度时以省略号等方式缩略显示，从而避免页面布局混乱。单行省略需要用到CSS3中的textoverflow属性，该属性有以...

CSS3的单行省略是在Web开发中常用的一种文本处理方式。它可以使文字在超出容器宽度时以省略号等方式缩略显示，从而避免页面布局混乱。

单行省略需要用到CSS3中的text-overflow属性，该属性有以下几个取值：

text-overflow: clip;   // 不显示省略号，直接裁剪超出部分。
text-overflow: ellipsis;  // 以省略号代替超出部分。
text-overflow: <string>;  // 以指定字符串代替超出部分。 

其中：为自定义的字符串。

在使用text-overflow属性时，一般需要结合white-space和overflow属性使用，以保证单行省略的效果。

/* 字数超出容器宽度时，以省略号代替 */
p {
  width: 200px; 
  overflow: hidden; 
  white-space: nowrap; 
  text-overflow: ellipsis;
} 

值得注意的是，在使用单行省略时，需要保证容器宽度固定，否则无法确定省略号的位置。

CSS3的单行省略让页面制作变得更加简便，同时也有利于提高用户浏览网页信息的效率。