适用于内核为webkit的浏览器:
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden; 兼容大多数浏览器,但是最后一行无论文本是否溢出都会出现省略号,需配合js实现
  
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%);
}
 

css多行文本省略号的更多相关文章

  1. css多行文本省略号问题

    已知,单行文本溢出内容用省略号代替,css代码如下: text-overflow: ellipsis; 溢出部分用...代替 white-space: nowrap; //强制在一行显示 overfl ...

  2. css多行文本省略号(...)

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

  3. CSS 设置多行文本省略号 ...

    CSS 设置多行文本省略号 ... .box{ display: -webkit-box; overflow: hidden; text-overflow: ellipsis; word-wrap: ...

  4. 多行文本省略号的实现.html

    多行文本省略号的实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  5. [CSS备忘]多行文本省略号

    overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box ...

  6. 多行文本省略号样式失效丢失,以及控制台显示autoprefixer警告'Autoprefixer applies control comment to whole block, not to next rules.'

    问题现象   使用webpack压缩打包vue项目,遇到一个问题,文本多行显示省略号的关键css语句-webkit-box-orient: vertical;莫名其妙丢失失效了.查阅资料,有不少人提出 ...

  7. 微信小程序之多行文本省略号

    最近在捣鼓小程序,期间遇到的问题,踩过的坑,也是在网上各种搜.这里也说下我解决的问题,方便大家. 在小程序首页显示文本列表的时候,为了美观,不希望把所有的文本都显示出来,希望是显示前几行(比如前3行, ...

  8. css多行文本垂直居中问题研究

    css多行文本垂直居中问题研究 <body> <h2>垂直居中对齐</h2> <style> *{margin:0; padding:0;} div { ...

  9. css 多行文本的溢出显示省略号(移动端)

    多行文本的溢出显示省略号(移动端) 一.单行文本的溢出显示省略号(通用) .mui-ellipsis { overflow: hidden; /*规定当文本溢出包含元素时发生的事情*/ white-s ...

随机推荐

  1. POS管理系统之新增设备入库

    <%@ page language="java" import="java.util.*" pageEncoding="utf-8"% ...

  2. 用 Navicat 写mysql的游标

    千言万语也比不上一个简单直接明了的小例子: CREATE PROCEDURE pro_users() begin DECLARE myid int; DECLARE no int; ); ); ); ...

  3. win7,xp通用的打开文件浏览对话框的方法

    第一种:Function BrowseForFile()     Dim shell : Set shell = CreateObject("WScript.Shell")     ...

  4. (转)这个API很“迷人”——新的Fetch API

    原文:https://hacks.mozilla.org/2015/03/this-api-is-so-fetching 原标题是This API is So Fetching,Fetching也可以 ...

  5. Redmine2.5+CentOS6+Apache2

    redmine是使用ruby开发的一款无任何商业限制且可自行部署的项目管理软件,其简洁的界面比较符合程序猿的定位,使用起来比较方便,由于我之前装3X没 成功,各版本之间的依存和配置都不一样,所以最后参 ...

  6. zip和zippartition总结

    最近在搞spark机器学习项目时,碰到了一些小问题.两个数据集要联到一起.比如rdd1=("abc","cde","dfc"),rdd2=( ...

  7. XidianOJ 1076 小W喜欢的数字

    题目描述 大家都知道,小W是一名大帅哥,当然比起Light还是有点儿差距的!帅气的小W认为0-9这些数字,只有1,3,5是完美的. 欲问小W为什么,小W总是说"帅哥,是不需要解释的" ...

  8. {VS2010C#}{WinForm}{ActiveX}VS2010C#开发基于WinForm的ActiveX控件

    在VS2010中使用C#开发基于WinForm的ActiveX控件 常见的一些ActiveX大部分是使用VB.Delphi.C++开发,使用C#开发ActiveX要解决下面三个问题: 使.NET组件可 ...

  9. [INS-32025] 所选安装与指定 Oracle 主目录中已安装的软件冲突

    windows server 2008 r2 enterprise下的解决办法为:删除C:\Program Files (x86)\Oracle\Inventory\ContentsXML目录下的in ...

  10. asp.net GDI+绘制多个矩形

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...