<!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. t5_sumdoc.txt

    C:\Users\Administrator\Documents\sumdoc 2019\sumdoc t5 final\sumdoc t511C:\Users\Administrator\Docum ...

  2. ESB企业服务总线到底是什么东西呢？

    顾名思义,企业服务总线(ESB)就是一条企业架构的总线,所有的企业服务都挂接到该总线上对外公布,企业服务总线负责管理服务目录,解析服务请求者的请求方法.消息格式,并对服务提供者进行寻址,转发服务请求. ...

  3. ubuntu apt-get 安装jdk

    参考地址:https://blog.csdn.net/ywueoei/article/details/80335799 . https://blog.csdn.net/inhumming/articl ...

  4. WPF Button LinkButton 绑定多个值 Template

    效果如下: 代码如下: <Button Click="InventoryDetail_OnClick" Template="{StaticResource Inve ...

  5. JZ落选跟我们有什么关系

    今天中午睡前刷了一下微博,看到JZ派落选了,底下一大堆冷嘲热讽的. 比如,养了一堆白眼狼,给了XG一堆利好政策,却这样FZ. 这种心态像极了多子女家庭的生活. 多子女家庭里,总有几个是性格比较乖巧,也 ...

  6. PHP 字符串和十六进制互转

    今天在做项目中,因为要调用别人网站的接口,结果需要对请求和返回的时间进行十六进制加密处理,于是在网上查了下资料谢了一个转换Demo做个记录. 如果在TP下使用可以将下面函数放到common.php中 ...

  7. robotframework启动ride失败，提示wxpython ImportError: DLL load failed: 找不到指定的模块

    背景:按照rf的操作,安装是没有问题,就是在启动ride.py 这个文件,就有问题了,提示 wxpython ImportError: DLL load failed: 找不到指定的模块 在pytho ...

  8. maven-archetype-plugin 的正确打开方式

    1.  准备好一个编辑好的模板工程 2. 在 pom.xml 中添加 maven-archetype-plugin 插件 <plugin> <groupId>org.apach ...

  9. Java分布式：分布式锁之Zookeeper

    Java分布式:分布式锁之Zookeeper 分布式锁系列教程重点分享锁实现原理 引入ZooKeeper ZooKeeper是什么呢? ZooKeeper 是一个开源的分布式协调服务,它可以在分布式系 ...

  10. myeclipse An internal error occurred during: "Initialize metrics".

    重新安装的myeclipse,在打开的时候弹出:    An internal error occurred during: "Initialize metrics". com/g ...