CSS实现单行、多行文本溢出显示省略号 指南攻略_文本小白常识

如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。实现方法:overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;效果如图:但是这个属性只支持单行文本的溢出显示省略号,如果我们要实现多行文本溢出

CSS实现单行、多行文本溢出显示省略号 指南攻略

如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。

CSS实现单行、多行文本溢出显示省略号 指南攻略_文本小白常识

实现方法:

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

效果如图:

CSS实现单行、多行文本溢出显示省略号 指南攻略_文本小白常识

但是这个属性只支持单行文本的溢出显示省略号,如果我们要实现多行文本溢出显示省略号呢。接下来重点说一说多行文本溢出显示省略号,如下。

实现方法:

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

效果如图:

CSS实现单行、多行文本溢出显示省略号 指南攻略_文本小白常识

适用范围:
因使用了WebKit的CSS扩展属性,该方法适用于WebKit浏览器及移动端;

注:

  1. -webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:
  2. display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
  3. -webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。

实现方法:

p{position: relative; line-height: 20px; max-height: 40px;overflow: hidden;}
p::after{content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px;
background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(right, transparent, #fff 55%);
background: -moz-linear-gradient(right, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);
}

适用范围:
该方法适用范围广,但文字未超出行的情况下也会出现省略号,可结合js优化该方法。

注:

  1. 将height设置为line-height的整数倍,防止超出的文字露出。
  2. 给p::after添加渐变背景可避免文字只显示一半。
  3. 由于ie6-7不显示content内容,所以要添加标签兼容ie6-7(如:<span>…<span/>);兼容ie8需要将::after替换成:after。
海计划公众号
(0)
上一篇 2020/03/24 05:44
下一篇 2020/03/24 05:44

您可能感兴趣的内容

FOOTER</footer

2020/04/06
  • 什么是angular依赖注入?使用帮助_angular基础知识教程 Web前端

    什么是angular依赖注入?使用帮助_angular基础知识教程

    依赖注入是Angular的重要特性之一,依赖注入简化了Angular解析模块/组件之间依赖的过程。依赖注入(Dependency Injection,简称DI)是一种软件设计模式,在这种模式下, 一个或更多的依赖(或服务)被注入(或者通过引用传递)到一个独立的对象(或客户端)中,然后成为了该客户端状态的一部分。该模式分离了客户端依赖本身行为的创建,这使得程序

    2020/03/31
  • Drop.js基础知识入门一款JavaScript和CSS实用下拉弹出层插件 Web前端

    Drop.js基础知识入门一款JavaScript和CSS实用下拉弹出层插件

    Drop.js基础入门 官方网址:http://github.hubspot.com/drop/ GitHub:https://github.com/HubSpot/drop/ 简…

    2020/03/05
  • 寂寞私聊软件使用教程 寂寞男女交友平台_聊天入门基础知识 Web前端

    寂寞私聊软件使用教程 寂寞男女交友平台_聊天入门基础知识

    寂寞男女交友软件是一款专门为单身士们提供的约会聊天交友工具,你可以在这里找到属于自己的有缘人,约会小萝莉邂逅心目中的女神,告别寂寞摆脱单身!聊天的环境绝对的安全,私密,遇见喜欢的人还可以送礼物哦!在这里你可以想跟谁约会就跟谁约会。最快最简单的约爱神器,便捷的搭讪方式,最爽最私密的聊天方式,让寂寞男女零距离沟通!社交软件上的小姐姐们,点击下载有时候,你害怕一个

    2020/03/26
  • bootlint.js使用指南_Bootstrap项目的HTML linter Web前端

    bootlint.js使用指南_Bootstrap项目的HTML linter

    bootlint.js使用指南 GitHub:https://github.com/twbs/bootlint 简介描述:Bootstrap项目的HTML linter Bootl…

    2020/03/06
  • 微信小程序视图层处理增强之WXS小白知识_小程序使用指南 Web前端

    微信小程序视图层处理增强之WXS小白知识_小程序使用指南

    熟悉微信小程序开发框架的开发者,肯定会对其视图层WXML中缺失的一个功能耿耿于怀,那就是没有办法在视图层对数据进行格式化处理。比如我们从后端获取到一个包含了时间戳数据的数组,然后需要在界面上把这些日期都格式化显示为2017-01-01这种格式的日期形式,在Vue, Angular之类的前端Web框架中,一般在视图层都提供了如filter之类相应比较好用的方案

    2020/04/03
  • Js中delete 0:到底是在删除什么?入门基础知识_语法入门教程 Web前端

    Js中delete 0:到底是在删除什么?入门基础知识_语法入门教程

    本文出自周爱民 《JavaScript 核心原理解析》 专栏。你好,我是周爱民,今天想和大家从 JavaScript 中最不起眼的、使用率最低的一个运算——delete 聊起。你知道,JavaScript 是一门面向对象的语言。它很早就支持了 delete 运算,这是一个元老级的语言特性。但细追究起来,delete 其实是从 JavaScript 1.2 中

    2020/03/23
  • 深入理解letter-spacing,word-spacing的对比区别基础入门_css入门教程 Web前端

    深入理解letter-spacing,word-spacing的对比区别基础入门_css入门教程

    letter-spacing lletter-spacing 属性增加或减少字符间的空白(字符间距)。该属性定义了在文本字符框之间插入多少空间。由于字符字形通常比其字符框要窄,指定长度值时,会调整字母之间通常的间隔。因此,normal 就相当于值为 0。

    thisisatest

    //

    2020/04/06
  • 用JavaScript带你体验V8引擎解析标识符零基础入门_引擎菜鸟教程 Web前端

    用JavaScript带你体验V8引擎解析标识符零基础入门_引擎菜鸟教程

    先上知识点,标识符的扫描分为快解析和慢解析,一旦出现Ascii编码大于128的字符或者转义字符,会进入慢解析,略微影响性能,所以最好不要用中文、特殊字符来做变量名(不过现在代码压缩后基本不会有这种情况了)。每一位JavaScript的初学者在学习声明一个变量时,都会遇到标识符这个概念,简单来讲标识符的定义如下。第一个字符,可以是任意Unicode字母(包括英

    2020/03/29
  • wordpress大前端DUX主题小白攻略_主题菜鸟教程 Web前端

    wordpress大前端DUX主题小白攻略_主题菜鸟教程

    DUX主题是基于WordPress程序的主题,由themebetter团队原创开发,是目前比较火的wordpress主题​DUX主题简介支持百度熊掌号,适用于垂直站点、科技博客、个人站,扁平化设计、简洁白色、超多功能配置、会员中心、直达链接、自动缩略图DUX主题基于WordPress程序,响应式布局支持电脑、平板和手机的完美展示布局:响应式布局,不同设备不同

    2020/03/30
  • javascript字符串进行编码的方法:escape编码、encodeURI编码、encodeURIComponent编码基础入门_字符串入门基础 Web前端

    javascript字符串进行编码的方法:escape编码、encodeURI编码、encodeURIComponent编码基础入门_字符串入门基础

    1.escape();
    语法:
    escape(string) // string 必需。要被转义或编码的字符串。
    返回值:
    已编码的 string 的副本。其中某些字符被替换成了十六进制的转义序列。
    说明:
    该方法不会对 ASCII 字母和数字进行编码,也不会对下面这些 ASCII 标点符号进行编码:** * @ – _ + . / **
    解码:
    un

    2020/04/06
  • DropCSS使用帮助_一个用来清理无用 CSS 的小工具 Web前端

    DropCSS使用帮助_一个用来清理无用 CSS 的小工具

    DropCSS使用帮助 GitHub:https://github.com/leeoniya/dropcss 简介描述:一个用来清理无用 CSS 的小工具 DropCSS 是一个用…

    2020/03/06
  • Smartour小白攻略_让网页导览变得更简单 Web前端

    Smartour小白攻略_让网页导览变得更简单

    Smartour小白攻略 官方网址:https://jrainlau.github.io/smartour/ GitHub:https://github.com/jrainlau/…

    2020/03/08
  • JavaScript到底是什么?特点有哪些?基础指南_特点攻略教程 Web前端

    JavaScript到底是什么?特点有哪些?基础指南_特点攻略教程

    JavaScript到底是什么?特点有哪些?这也是成为web前端工程师必学的内容。今天为大家分享了这篇关于JavaScript的文章,我们一起来看看。 一、JavaScript是什么?1、JavaScript是在网站浏览器上运行的编程语言。主要是向使用HTML和CSS构建的网站添加,并起到实现各种页面动态效果的作用。例如,在网页上展示的轮播图样式和在咨询平台

    2020/03/23
  • JavaScript中fetch接口的用法使用指南攻略_fetch指南教程 Web前端

    JavaScript中fetch接口的用法使用指南攻略_fetch指南教程

    如果看网上的fetch教程,会首先对比XMLHttpRequest和fetch的优劣,然后引出一堆看了很快会忘记的内容(本人记性不好)。因此,我写一篇关于fetch的文章,为了自己看着方便,毕竟工作中用到的也就是一些很基础的点而已。fetch,说白了,就是XMLHttpRequest的一种替代方案。如果有人问你,除了Ajax获取后台数据之外,还有没有其他的替

    2020/04/03
  • 九大高效的前端测试工具与框架使用帮助_测试基础入门 Web前端

    九大高效的前端测试工具与框架使用帮助_测试基础入门

    在每个Web应用程序中,作为用户直接可见的应用程序外观,“前端”包括:图形化的用户界面、相应的功能、及其整体站点的可用性。我们可以毫不夸张地说:如果前端无法正常工作,您将无法“拉新”网站的潜在用户。这也正是我们需要对Web应用执行前端测试的重要原因。为了确保Web应用无论发生了何种变更之后,其对应的前端都能够与bug“隔离”,我们需要针对前端开展各种测试,主

    2020/03/23