[分享]css3文字剪切

在CSS3中，文字剪切（textoverflow）是一种用于处理文本溢出的属性。当文本超出容器大小或父元素的限制时，它可以通过省略号、剪切或显示滚动条来控制文本的显示方式。以下是一些使用textove...

在CSS3中，文字剪切（text-overflow）是一种用于处理文本溢出的属性。当文本超出容器大小或父元素的限制时，它可以通过省略号、剪切或显示滚动条来控制文本的显示方式。

以下是一些使用text-overflow属性的示例：

/* 省略号 */
.text {
  white-space: nowrap; /* 文本不换行 */
  overflow: hidden; /* 文本溢出隐藏 */
  text-overflow: ellipsis; /* 文本以省略号结束 */
}

/* 剪切 */
.text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

/* 滚动条 */
.text {
  white-space: nowrap;
  overflow: auto; /* 显示滚动条 */
  text-overflow: clip;
} 

需要注意的是，text-overflow属性只适用于包含单行文本的元素，而不是多行文本。对于多行文本，应该使用其他方法，例如使用JavaScript来计算和截断文本。

除了text-overflow属性，CSS3还提供了其他一些用于处理文本的新属性，如word-break、word-wrap、letter-spacing等。使用这些属性可以更好地控制文本的显示效果。