[分享]css3文字溢出出理

CSS3 中的文字溢出处理是一个非常常用的技巧，可以帮助我们更好的控制文本内容的展示，下面我们来一起学习一下吧。首先，在 CSS 中，有三种文字溢出处理方式，分别是 clip、ellipsis 和 s...

CSS3 中的文字溢出处理是一个非常常用的技巧，可以帮助我们更好的控制文本内容的展示，下面我们来一起学习一下吧。

首先，在 CSS 中，有三种文字溢出处理方式，分别是 clip、ellipsis 和 string，我们分别来看一下各自的用法：

/* clip 方式 */
.text {
  width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: clip;
}

/* ellipsis 方式 */
.text {
  width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* string 方式 */
.text {
  width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: "";
} 

三种方式都需要设置宽度、溢出设置与文本换行设置，下面我们来分别解释一下：

1. clip 方式：这种方式会自动将文本丢弃掉裁剪处理，只显示指定宽度内的文本内容。

2. ellipsis 方式：这种方式会在文本超出指定宽度时用省略号来代替多余部分。

3. string 方式：这种方式会保留多余的文本，在文本末端添加给定的字符串，可以用 “…” 或者其他字符代替。

总的来说，文字溢出处理是 CSS 中非常重要的一项技能，可以让我们更好的掌控内容的展示和分页，希望大家都能掌握这种技巧。