<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>多行文本实现省略号显示</title>

</head>

<style type="text/css">

    /*纯css实现省略号，兼容火狐，IE9，chrome*/

    .wrap{

        height:40px;line-height:20px;overflow: hidden;width:500px;background:#999;

    }

    .wrap .text{

        float:right;margin-left:-5px;width:500px;word-break: break-all;

    }

    .wrap::before{

        float:left;width:5px;content:'';height:40px;

    }

    .wrap::after{

        float:right;content:'...';height:20px;line-height:20px;

        width:30px;margin-left:-30px;/*更改宽度和边距，移动省略号位置*/

        position:relative;left:100%;top:-20px;

        padding-right:5px;background:#999;

    }

</style>

<body>

    <div class="wrap">

        <div class = "text">

            ceshi测试ceshi测试ceshi测试ceshi测试ceshi测试ceshi测试ceshi测试ceshi测试ceshi测试ceshi测试ceshi测试ceshi测试ceshi测试ceshi测试ceshi测试ceshi测试ceshi测试ceshi测试ceshi测试ceshi测试ceshi测试

        </div>

    </div>

</body>

</html>

　　

纯css实现省略号，兼容火狐，IE9，chrome的更多相关文章

  1. 兼容火狐，Chrome,IE6，IE7，IE8的HTML换行写法

    本文链接:https://java-er.com/blog/html-break-line-firefox-chrome/ 兼容火狐,Chrome,IE6,IE7,IE8的HTML换行写法1.任意数据 ...

  2. css--两行显示省略号兼容火狐浏览器

    css--两行显示省略号兼容火狐浏览器 正常写法: .ellipse1{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;} . ...

  3. 页面元素固定在页面底部的纯css代码（兼容IE6）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. css zoom属性兼容ie,firefox,chrome

    jquery代码: $("body").css({ "zoom":"2", "transform":"scal ...

  5. input框设置onInput事件只能输入数字，能兼容火狐IE9

    使用onInput()事件 onInput()是 HTML5 的标准事件,对于检测 textarea, input:text, input:password 和 input:search 这几个元素通 ...

  6. css把超出的部分显示为省略号的方法兼容火狐

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  7. JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome

    今天为大家分享一下我自己制作的浏览器滚动条,我们知道用css来自定义滚动条也是挺好的方式,css虽然能够改变chrome浏览器的滚动条样式可以自定义,css也能够改变IE浏览器滚动条的颜色.但是css ...

  8. 用纯css改变下拉列表select框的默认样式（不兼容IE10以下）

    在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式.     事情是这样的,您的设计师团队向您发送一个新的PSD(Photoshop文档),它是一个新的网站的最终设计 ...

  9. js控制固定div和随屏滚动div兼容多浏览器和纯css控制（来自网络）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. java性能优化之HashMap，LinkedHashMap，TreeMap读取大量数据效率的比较

    很多时候,我们用jdbctemplate或mybatis的时候,为了查询通用,会选择使用map数据结构,因为hashmap本身无序,所以为了保证key的有序性,会采用linkedhashmap.所以我 ...

  2. PostgreSQL DISTINCT 和 DISTINCT ON

    select语句中,使用distinct关键字,在处理select list后,结果表可以选择消除重复的行.在SELECT之后直接写入DISTINCT关键字以指定此关键字: SELECT DISTIN ...

  3. 模态窗口showModalDialog的浏览器兼容解决方案【改】

    将代码中原来的 window.showModalDialog 全部替换成: showModalDialogN 然后增加方法: function showModalDialogN(uri, args, ...

  4. C++ Map运用实例

    C++ Map运用实例 #include <map> #include <string> #include <iostream> #include <ioma ...

  5. python时间戳，获取当前时间，时间格式转换，求出前几天或后几天的时间

    import time import datetime import locale import random class TimeUtil: def __init__(self, curtime=N ...

  6. TransactionScope处理分布式事物时提示"事务已被隐式或显式提交,或已终止"

    在连接字符串中加入"Enlist=false",问题就这样解决了. ConnectionString = "Data Source=.;Initial Catalog=c ...

  7. 【翻译】FlinkCEP-Flink的复杂事件处理

    本文翻译自官网:FlinkCEP - Complex event processing for Flink FlinkCEP是在Flink之上实现的复杂事件处理(CEP)库. 它使您可以检测无穷无尽的 ...

  8. EasyNVR摄像机网页无插件直播方案H5前端构建之：bootstrap-datepicker日历插件的实时动态展现

    EasyNVR场景需求 基础:不管是城市监控还是园区管理或者是幼儿园监控,这些安防监控需求已经成为我们生活中不可或缺的重要一环,这不仅仅是提升城市管理水平和人民群众安全感的现实需求,也是完善社会治安消 ...

  9. [xsy3132]数表

    题意:一个$n\times m$的数表,数值$\in[0,4)$,你可以任意次选择一行或一列$+1,\text{mod }4$,要最小化所有数的和 因为$n\leq10$,所以数表可以看成$m$个$n ...

  10. my97整合fineui例子，开始和结束时间

      <f: Toolbar runat ="server">                             <Items>             ...