IE8/9 使用text-overflow: ellipsis 做块元素超长内容变省略号的问题

当某个块元素的内容过长时，为了保证页面的美观度，有时需要将超出部分省略显示为省略号（...）。而在IE8/9浏览器中，使用 text-overflow: ellipsis 作为实现超出内容显示省略号的方式会出现问题，以下是解决方案的攻略。

步骤

1. 设置块元素的样式

首先，需要给块元素设置 text-overflow: ellipsis，以实现内容超出限制部分被省略。

div{
  width: 200px; /* 限制宽度 */
  text-overflow: ellipsis; /* 超出省略 */
  overflow: hidden; /* 隐藏溢出部分 */
  white-space: nowrap; /* 禁止换行 */
}

2. 创建元素（::before或::after）以覆盖溢出的部分

IE8/9浏览器并不支持直接使用 text-overflow: ellipsis 来实现超出内容显示省略号，需要借助其他的 DOM 元素来覆盖超出部分的文本来实现。

一般我们可以通过 ::before 或 ::after 伪元素来实现省略号的效果。具体如下：

div:after{
  content: "..."; /* 显示省略号 */
  position: absolute; /* 元素定位 */
  right: 0; /* 在右边 */
  bottom: 0; /* 在下边 */
  padding: 0 5px; /* 加上padding留下空间 */
}

3. 最终样式

将以上两步合并，组成最终的CSS样式如下：

div {
  width: 200px; /* 限制宽度 */
  text-overflow: ellipsis; /* 超出省略 */
  overflow: hidden; /* 隐藏溢出部分 */
  white-space: nowrap; /* 禁止换行 */
  position: relative; /* 增加定位的相对父元素 */
}

div:after {
  content: "..."; /* 显示省略号 */
  position: absolute; /* 元素定位 */
  right: 0; /* 在右边 */
  bottom: 0; /* 在下边 */
  padding: 0 5px; /* 加上padding留下空间 */
}

示例

示例1

HTML代码：

<div>
  这是一段很长很长很长很长很长很长的文本内容，将被处理为省略号。
</div>

CSS代码：

div {
  width: 200px; /* 限制宽度 */
  text-overflow: ellipsis; /* 超出省略 */
  overflow: hidden; /* 隐藏溢出部分 */
  white-space: nowrap; /* 禁止换行 */
  position: relative; /* 增加定位的相对父元素 */
}

div:after {
  content: "..."; /* 显示省略号 */
  position: absolute; /* 元素定位 */
  right: 0; /* 在右边 */
  bottom: 0; /* 在下边 */
  padding: 0 5px; /* 加上padding留下空间 */
}

结果：

这是一段很长很长很长很长很长很长的文本内容，将被处理为省略号。...

示例2

HTML代码：

<div class="box">
  <h2>这是标题</h2>
  <p>这是一段很长很长很长很长的文本内容，将被处理为省略号。</p>
</div>

CSS代码：

.box {
  width: 200px; /* 限制宽度 */
}

.box p {
  text-overflow: ellipsis; /* 超出省略 */
  overflow: hidden; /* 隐藏溢出部分 */
  white-space: nowrap; /* 禁止换行 */
  position: relative; /* 增加定位的相对父元素 */
}

.box p:after {
  content: "..."; /* 显示省略号 */
  position: absolute; /* 元素定位 */
  right: 0; /* 在右边 */
  bottom: 0; /* 在下边 */
  padding: 0 5px; /* 加上padding留下空间 */
}

结果：