纯CSS实现“文本溢出截断省略”的几种方法

下面我将为大家详细讲解“纯CSS实现文本溢出截断省略”的几种方法,包括单行文本截断和多行文本截断。

单行文本截断

方案一:利用text-overflow属性

/* 显示省略号 */
.ellipsis1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

使用text-overflow属性可以很方便地实现单行文本的截断并且在末尾添加省略号。其中,text-overflow: ellipsis表示末尾用省略号表示超出的内容。

方案二:利用width和overflow属性

/* 显示省略号 */
.ellipsis2 {
  width: 100px;
  overflow: hidden;
  white-space: nowrap;
}

/* 不显示省略号 */
.no-ellipsis {
  width: 100px;
  overflow: hidden;
  white-space: nowrap;
}

同时利用width和overflow属性可以实现单行文本的截断,如果想要在末尾添加省略号,只需要设置text-overflow属性为ellipsis,否则可以不设置。

多行文本截断

方案一:利用-webkit-line-clamp属性

.ellipsis-multiline {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

-webkit-line-clamp属性是一个WebKit私有属性,可以限制在一个块元素显示的文本的行数。该属性需要结合display属性的-webkit-box(将对象作为弹性伸缩盒子模型显示)属性和WebKit私有属性-webkit-box-orient(设置或检索伸缩盒对象的子元素的排列方式)属性一起使用。

方案二:利用纯CSS实现

.content {
  position: relative;
  width: 150px;
  line-height: 1.2em;
  overflow: hidden;
}

.content::before {
  content: "...";
  position: absolute;
  right: 0;
  bottom: 0;
}

.content::after {
  content: "";
  position: absolute;
  right: 0;
  width: 20px;
  height: 1.2em;
  margin-top: -1.2em;
  background: #fff;
}

该方案利用了伪元素 ::before 和 ::after 来实现文本的截断。 ::before 元素添加 "...", ::after 元素使用background 属性,使省略号在文本后不会显示。

以上是实现文本溢出截断省略的几种方法并举了两个例子来介绍。希望对大家有所帮助。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:纯CSS实现“文本溢出截断省略”的几种方法 - Python技术站

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

相关文章

  • jQuery实现带滚动导航效果的全屏滚动相册实例

    准备工作: 本实例需要用到jQuery、fullpage.js和TweenMax.js,所以在开始之前要确保已经引入了这些库文件。 <head> <script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script> <script…

    css 2023年6月10日
    00
  • 掌握AJAX第4/7页

    要掌握AJAX第4/7页,需要掌握以下几点: 1.掌握HTTP请求和响应的工作原理 了解HTTP协议的请求和响应的基本结构,包含请求方法、请求头部、请求体、响应头部和响应体等组成。可以使用Chrome浏览器的开发者工具网络选项卡对HTTP请求和响应进行实时监控。 2.使用XMLHttpRequest对象发送HTTP请求 XMLHttpRequest对象是AJ…

    css 2023年6月10日
    00
  • 利用css3如何设置没有上下边的列表间隔线

    想要设置一个没有上下边框的列表间隔线,可以采用下面这两种方法: 方法一:使用伪元素 :before 和 :after 利用 CSS3 中的伪元素 :before 和 :after,可以在每个列表项之前和之后插入一个 li 元素的伪元素,并将其设置为条纹样式,从而达到没有上下边框的列表间隔线的效果。 以下是示例代码: ul { list-style: none…

    css 2023年6月9日
    00
  • vue实现放大缩小拖拽功能

    下面是详细的讲解“Vue实现放大缩小拖拽功能”的完整攻略。 思路 Vue 实现放大缩小拖拽功能的核心是通过指令绑定(Directive Binding)和虚拟DOM的实时更新来控制元素的样式和位置。 具体实现思路: 在 Vue 中定义一个指令,该指令将会被绑定到元素上面。 在元素中设置样式,并在指令中实现这些样式。 在指令中监听 mousedown,mous…

    css 2023年6月11日
    00
  • 最新百度PM告诉你SEO这六个方面的优化原则(干货)

    最新百度PM告诉你SEO这六个方面的优化原则(干货) 本文介绍了最新的百度搜索引擎优化原则,将涵盖以下六个方面的优化原则: 网站内容要有价值 关键词选择要精准 网站结构要清晰 链接质量要高 移动端适配要到位 速度优化要充分 下面将从这六个方面给出详细的优化攻略。 1. 网站内容要有价值 为了让用户有更好的体验,同时也是满足百度对内容要求的基础,网站内容需要提…

    css 2023年6月10日
    00
  • CSS :befor :after 伪元素的巧妙用法

    当我们想要为文本或元素添加一些额外的效果时,可以使用CSS中的伪元素(pseudo-element)::before 和 :after。这两个伪元素可以用来插入一些内容和样式到文档中,这些内容和样式并不存在于文档中,但是可以被CSS选择器选择。 CSS :before 伪元素 :before 伪元素用于在元素前面插入一些内容。例如,我们可以使用 :befor…

    css 2023年6月10日
    00
  • JS选取DOM元素的简单方法

    下面是JS选取DOM元素的简单方法的完整攻略: 1. 使用document.getElementById() 文档中的每个HTML元素都可以通过给定的“id”属性进行标识。要使用JS选取这些元素,可以使用document.getElementById()方法。该方法接收一个参数,即HTML元素的“id”属性的值。下面是一个示例: // 通过id选取元素 co…

    css 2023年6月9日
    00
  • Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法

    针对此问题,我将分为以下几个部分进行详细讲解: lib-flexible插件的介绍; 使用lib-flexible插件进行移动端适配的具体步骤; 示例演示。 1. lib-flexible插件介绍 lib-flexible是淘宝的前端团队提供的基于rem布局的插件,旨在解决移动端适配问题。在使用lib-flexible后,网页会根据不同的屏幕宽度自适应地调整…

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