当某个块元素的内容过长时,为了保证页面的美观度,有时需要将超出部分省略显示为省略号(...)。而在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留下空间 */
}
结果:
这是标题
以上是解决IE8/9浏览器中使用 text-overflow: ellipsis
实现超出内容省略的完整攻略,通过 ::before
或 ::after
伪元素来实现。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:IE8/9 使用text-overflow: ellipsis 做块元素超长内容变省略号的问题 - Python技术站