text-overflow、white-space、word-wrap用法

text-overflow

text-overflow用于指定当文本溢出包含它的元素时，应该如何显示。

<div class="textDiv1">asddddddddddddddddd</div>

<style>
.textDiv1 {
  width: 100px;
}
</style>

当我们不指定textDiv1的text-overflow属性时，就算文本超出容器内容，也会全部展示。

这时，我们添加text-overflow属性就可以将超出内容以指定形式展现，比如以省略号…显示。

<style>
.textDiv1 {
  width: 100px;
  overflow: hidden;  /* text-overflow需要配合overflow: hidden使用 */
  text-overflow: ellipsis;
}
</style>

white-space

white-space用于指定元素内的空白怎样处理。

<div class="textDiv2">hellooooooo world</div>

<style>
.textDiv2 {
  width: 100px;
}
</style>

当我们不指定textDiv2的white-space属性时，如果单词超出容器内容就会自动换行。

如果不想换行，可以添加 white-space: nowrap 属性。

<style>
.textDiv2 {
  width: 100px;
  white-space: nowrap;
}
</style>

与 text-overflow 搭配使用：

<style>
.textDiv2 {
  width: 100px;
  overflow: hidden;  /* text-overflow需要配合overflow: hidden使用 */
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>

word-wrap

word-wrap属性允许长字符可以自动换行。

<div class="textDiv3">hellooooooooooooooooooooooo</div>

不添加word-wrap属性时：

<style>
.textDiv3 {
  width: 100px;
}
</style>

添加 word-wrap: break-word 使长字符串自动换行

<style>
.textDiv3 {
  width: 100px;
  word-wrap: break-word;
}
</style>

以上只介绍了text-overflow、white-space、word-wrap的常用属性，想要深入了解的小伙伴可自行查阅资料。