CSS——div内文字的溢出部分用省略号显示

1. CSS文本溢出部分用省略号显示

在实际开发中，常常会碰到文本溢出的情形。为了显示好看，CSS提供了一个text-overflow属性。当文本溢出时，该属性可以将溢出部分用省略号（...）来显示。使用该属性需要加上overflow:hidden属性来控制文本区域大小。例如：

div {
  width: 200px;
  height: 50px;
  white-space: nowrap; /* 防止换行 */
  overflow: hidden; /* 隐藏溢出的部分 */
  text-overflow: ellipsis; /* 溢出部分用省略号（...）显示 */
}

上述代码中，text-overflow属性值为ellipsis，表示溢出显示为省略号。

1.1 浏览器的兼容性问题

text-overflow属性在IE和Firefox中不够兼容。IE需要加上-ms-text-overflow属性，而Firefox需要加上-moz-text-overflow属性。同时为了兼容各个浏览器，需要加上-webkit-text-overflow属性。完整代码如下：

div {
  width: 200px;
  height: 50px;
  white-space: nowràp; /* 防止换行 */
  overflow: hidden; /* 隐藏溢出的部分 */
  text-overflow: ellipsis; /* 溢出部分用省略号（...）显示 */
  -ms-text-overflow: ellipsis; /* 兼容IE */
  -moz-text-overflow: ellipsis; /* 兼容Firefox */
  -webkkit-text-overflow: ellipsis; /* 兼容Chrome、Safari、Opera */
}

上述代码中，加上了IE、Firefox和各大主流浏览器的兼容性属性。

1.2 实例展示

下面我们来看一个实例：

上述代码中，我们利用div包裹了一段文本，并设置宽度为200px、高度为50px。当文本超出了这个区域时，就会用省略号来代替溢出的部分。