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留下空间 */
}

结果:

这是标题

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

以上是解决IE8/9浏览器中使用 text-overflow: ellipsis 实现超出内容省略的完整攻略,通过 ::before::after 伪元素来实现。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:IE8/9 使用text-overflow: ellipsis 做块元素超长内容变省略号的问题 - Python技术站

(0)
上一篇 2023年6月9日
下一篇 2023年6月9日

相关文章

  • CSS hack实现 CSS完美兼容IE6/IE7/FF的通用方法

    CSS hack是为了兼容不同浏览器所采用的编写CSS代码的技巧。下面是通用方法的攻略: 一、注释法 在CSS代码块中编写以下代码: .selector { color: red; /*所有浏览器应用此代码*/ _color: blue; /*只有IE6、IE7浏览器应用此代码,其他浏览器忽略*/ *color: yellow; /*IE6、IE7应用此代码…

    css 2023年6月10日
    00
  • 推荐WEB开发者最佳HTML5和CSS3代码生成器

    当今,HTML5和CSS3已经成为Web开发者必备的技能,但有时为了开发一个简单的网站,我们也需要创建很多基本的HTML和CSS代码。为了提高开发效率,许多优秀的代码生成器应运而生,这里介绍一些推荐的HTML5和CSS3代码生成器。 1. HTML5代码生成器 1.1 HTML5 Drag and Drop Generator 这个生成器可以帮助您轻松地为任…

    css 2023年6月9日
    00
  • 基于wordpress主题制作的具体实现步骤

    下面我来详细讲解基于WordPress主题制作的具体实现步骤的完整攻略。 一、准备工作 在进行WordPress主题制作之前,需要准备以下工作: 安装并配置WordPress环境; 选择自己喜欢的IDE,例如Sublime Text、VS Code等; 掌握HTML、CSS、PHP等基础知识。 二、创建一个新的WordPress主题 我们可以利用现成的主题模…

    css 2023年6月9日
    00
  • css实现文章分割线样式的多种方法总结

    CSS实现文章分割线样式的多种方法总结 在文章内容中,为了更好地梳理结构,通常会加入分割线。为了把分割线做得更加生动且独特,我们可以使用CSS来实现不同样式的分割线。本文将详细介绍实现CSS分割线样式的多种方法。 1. 使用border实现基础分割线 CSS的border属性可以实现一个基础的分割线,只需设置对应的边框样式、颜色和宽度即可。 .separat…

    css 2023年6月10日
    00
  • 网页表格或div层在网页中被撑开解决之道

    网页中的表格或DIV层在内容较多时可能出现被撑开的情况,导致页面布局混乱,影响用户体验。下面是解决这种情况的完整攻略。 方法一:使用CSS属性overflow CSS属性overflow可以用来控制元素溢出的部分如何显示,可以将其设置为auto或scroll,来自动或手动添加滚动条。 示例一: table { width: 100%; overflow-x:…

    css 2023年6月10日
    00
  • 利用iscroll4实现轮播图效果实例代码

    使用iscroll4实现轮播图效果,可以提高用户的交互体验,下面是实现该效果的攻略: 步骤一:导入iscroll4 在页面中引入iscroll4的js和css文件,可以从以下地址下载: https://github.com/cubiq/iscroll/archive/v4.2.5.zip 步骤二:页面结构 在页面中添加一个div元素,用于包含轮播图的图片,H…

    css 2023年6月10日
    00
  • vue中响应式布局如何将字体大小改成自适应

    当视口的宽度发生变化时,通过响应式布局来适配不同终端设备的屏幕尺寸是非常重要的。其中,一个关键的问题是如何使字体的大小自适应。Vue.js通过提供内置directive,即 v-bind:class,以及CSS Flexbox来解决这个问题,下面是完整攻略。 1. 使用CSS中的rem rem是CSS的一个相对单位,它是相对于根元素的字体大小进行计算的。在v…

    css 2023年6月9日
    00
  • 使用css实现全兼容浏览器的三角形

    要使用CSS实现全兼容浏览器的三角形,通常有两种方法。 方法一:使用border实现 使用border属性,可以非常简单地实现三角形效果。假设我们要画一个向右的三角形,可以使用以下代码: .triangle { width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50…

    css 2023年6月9日
    00
合作推广
合作推广
分享本页
返回顶部