1，公共样式，在公共的 CSS 文件中加入以下内容 

/* 超出部分显示省略号，支持多行 */

.text-ells:before {

    content: '';

    float: left;

    width: 5px;

    height: 100%;

}

.text-ells > :first-child {

    float: right;

    width: 100%;

    margin-left: -5px;

    word-break: break-all;

    word-wrap: break-word;

    text-align: justify;

}

.text-ells:after {

    content: '...';

    box-sizing: content-box;

    float: right;

    position: relative;

    width: 50px;

    top: -25px;

    left: 100%;

    margin-left: -50px;

    padding-right: 5px;

    text-align: right;

    background: linear-gradient(to right, rgba(255, 255, 255, 0), #ffffff 40px);

}

2，使用方法如下，很简单，注意看注释部分

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>数字编码</title>

    <!-- 引入刚刚添加了上面样式的公共 CSS 文件 -->

    <link rel="stylesheet" href="../css/common.css">

    <style type="text/css">

        /* 目标元素必须设置宽高，以及行高才能生效，想要保留多少行，高就设置为行高的多少倍 */

        .text {

            width: 400px;

            height: 60px;

            line-height: 30px;

            overflow: hidden;

        }

        /* 目标元素必须设置一个 AFTER，这里的 TOP 设置为 行高的 相反数 */

        .text:after {

            top: -30px;

        }

    </style>

</head>

<body>

<div class="wrap">

    <!-- 目标元素直接引入 text-ells -->

    <div class="text-ells text">

        <!-- 目标元素需要添加一个子元素，在子元素里放文字 -->

        <div>

            2.main 这里是要多行文本溢出省略的dj

            nfskfnsknjvndsfkjsnfkas nfdjskn

            fkjdsnfkjdsnfkjshfnsajfknk

            jsafnkjsangkjdsncjkdsvdsbjb

        </div>

    </div>

</div>

</body>

</html>

3，效果 

HTML5 元素文字超出部分显示省略号（支持多行），兼容几乎所有常用浏览器的更多相关文章

  1. Table组件设置文字超出宽度显示省略号，鼠标悬停以悬浮框显示

    一.设置文字超出宽度显示省略号 注意点: 1.  需要指定column的width属性,否则列头跟内容可能不对齐.需要留一列不设置宽度以适应弹性布局. 2. 列宽度width必须大于ellipsis的 ...

  2. css文字超出自动显示省略号

    只针对单行文本有效: 01.针对块状元素 ul li{ width: 180px; text-overflow: ellipsis; white-space: nowrap;/*禁止自动换行*/ ov ...

  3. css 控制文字超出部分显示省略号

    该文章转自:http://www.daqianduan.com/6179.html 如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽 ...

  4. css 控制文字超出时显示省略号

    不多说,直接看代码吧: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...

  5. CSS控制 文字超出部分显示省略号

    实现单行文本的溢出显示省略号, (需要加宽度width属来兼容部分浏览) <p style="width: 100px;overflow: hidden;white-space: no ...

  6. css 文字超出部分显示省略号(原)

    单行超出省略号 #word1{width: 100px; text-overflow: ellipsis; overflow: hidden;} 几行超出省略号(只兼容webkit内核) #wordN ...

  7. css设置文字超出部分显示省略号。。。

    兼容IE/Firefox/Chrome display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;

  8. 多行文字超出字数部分省略(主要解决不兼容;display: -webkit-box;的浏览器)

    注明:内容来处https://www.cnblogs.com/ss977/p/5846176.html 1.现webkit内核的浏览器支持display: -webkit-box;属性, 所以网页中显 ...

  9. css文本强制两行超出就显示省略号,不显示省略号

    1. 强制一行的情况很简单 overflow:hidden; //超出的隐藏 text-overflow:ellipsis; //省略号 white-space:nowrap; //强制一行显示 2. ...

随机推荐

  1. MySQL：数据查询

    数据查询 一.基本查询语句 1.语法:写一行 select{*<字段列表>}//查询的字段,多个字段用逗号分开 from<表1>,<表2>…//数据表名 {//可选 ...

  2. Sublime Keymap 设置

    深深受 Emacs 组合键的影响,在编辑的时候使用组合键快速移动,而不比像 VIM 需要切换模式,但不得不吐槽 Emacs 的插件安装那个叫恶心,所以尝试了新生代产品 Sublime,但是还是离不开 ...

  3. JVM垃圾回收算法解析

    JVM垃圾回收算法解析 标记-清除算法 该算法为最基础的算法.它分为标记和清除两个阶段,首先标记出需要回收的对象,在标记结束后,统一回收.该算法存在两个问题:一是效率问题,标记和清除过程效率都不太高, ...

  4. java-Calendar类

    1.Calendar类的概述和获取日期的方法 * A:Calendar类的概述 * Calendar 类是一个抽象类,它为特定瞬间与一组诸如 YEAR.MONTH.DAY_OF_MONTH.HOUR ...

  5. python gevent自动挡的协程切换。

    import gevent def func(): print('running func 111')#第一步运行 gevent.sleep(2)#切换到下个协程 print('running fun ...

  6. oracle获取连续时间

    SELECT rownum, (to_date('2015-01-01', 'yyyy-mm-dd') + rownum - 1) AS show_time FROM dualCONNECT BY r ...

  7. PythonStudy——进制 System of numeration

    十进制 人类天然选择了十进制. 二进制 二进制有两个特点:它由两个数码0,1组成,二进制数运算规律是逢二进一. 四进制 四进制是以4为基数的进位制,以 0.1.2 和 3 四个数字表示任何实数. 七进 ...

  8. PostgreSQL 自定义自动类型转换(CAST)

    转载自:https://yq.aliyun.com/articles/228271 背景 PostgreSQL是一个强类型数据库,因此你输入的变量.常量是什么类型,是强绑定的,例如 在调用操作符时,需 ...

  9. [ZZ] 麻省理工( MIT)大神解说数学体系

    麻省理工( MIT)大神解说数学体系 http://blog.sina.com.cn/s/blog_5ff4fb7b0102e3p6.html 其实每一门学科都应该在学习完成后,在脑子里面有一个体系, ...

  10. 手把手教你实现 Google 拓展插件（转自实验楼）

    一.课程简介 1.1 实验介绍 本课程的实验环境由实验楼提供,Google 浏览器拓展的运行环境为 Google 浏览器.在本实验中,你将了解如何制作一个属于你自己的 Google 拓展插件. 课程实 ...