CSS3 - 让div中的文字不换行（附：超出部分直接截断、或省略号代替）

2017-07-02 发布：hangge 阅读：13130

默认情况下，如果 div 内的文字如果一行显示不下的话，它会自动折行显示。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>hangge.com</title>
    <style>
      .content {
        width: 150px;
        height: 60px;
        background-color: lightcyan;
      }
    </style>
  </head>
  <body>
    <div class="content">
        hangge.com 欢迎您. 欢迎您. 欢迎您.
    </div>
  </body>
</html>

1，强制不换行

如果想让文字在一行显示，不要自动换行。将 white-space 样式设置为 nowrap 即可。

.content {
  width: 150px;
  height: 60px;
  background-color: lightcyan;
  white-space: nowrap;
}

2，超出的部分直接截断

从上面的效果图可以看出，如果强制不换行的话，多余的内容会直接溢出容器。通过“overflow: hidden”样式，可以将超出的部分直接隐藏。

.content {
  width: 150px;
  height: 60px;
  background-color: lightcyan;
  overflow: hidden;
  white-space: nowrap;
}

3，多余的部分使用...代替

有时将多余的内容直接隐藏效果也不太好，因为看不出内容是刚好能显示，还是已经被截断了。

（1）这时再添加个“text-overflow: ellipsis”样式，可以让多余的部分用省略号（...）代替。

.content {
  width: 150px;
  height: 60px;
  background-color: lightcyan;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

（2）text-overflow 还可以设置为 clip，那多余的部分将被直接截去。

.content {
  width: 150px;
  height: 60px;
  background-color: lightcyan;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}