<!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. pandas.DataFrame.dropna删除缺失值

    https://study.163.com/course/courseMain.htm?share=2&shareId=400000000398149&courseId=1006383 ...

  2. HandlerMethodReturnValueHandler SpringMVC 参数解析 继承关系以及各解析器解析类型

    I HandlerMethodReturnValueHandler (org.springframework.web.method.support) AbstractMessageConverterM ...

  3. 安装和使用nltk

    安装 参考:https://www.cnblogs.com/zrmw/p/10869325.html 分词:注意先分句再分词,这些对象均来自nltk.tokenize库 word_tokenize 导 ...

  4. SpringCloud 微服务中 @Async 注解自定义线程池 引发的aop 问题

    背景 在 使用springCloud 的@Async注解来做异步操作时,想自定义其线程池. 引发问题 自定义完线程池后,发现代码里并没有使用自定义线程池里的线程,于是新建一个demo工程,一样的配置代 ...

  5. 搭建npm私服流程

    npm私服必要性 1. 如果公司处于隐私保护的需要,不想将自己封的包推到npm社区,但又急需要一套完整的包管理工具来管理越来越多的组件,模块,项目.对于前端,最熟悉的莫过于npm,bower等,但是b ...

  6. python2与python3的区别齐全【整理】

    本文链接:https://blog.csdn.net/pangzhaowen/article/details/80650478 展开 一.核心类差异1. Python3 对 Unicode 字符的原生 ...

  7. Unity2018安装

    1. 直接安装 2.  先安装Unity 2018.2.14f1 若有C:\ProgramData\Unity文件夹,删除这个文件夹下的所有文件 3. 解压 unity2018破解.zip 将最后一个 ...

  8. Java 注解基本原理

    原文地址 注解的本质 「java.lang.annotation.Annotation」接口中有这么一句话,用来描述『注解』. The common interface extended by all ...

  9. RestTemplate支持GET方法携带Body信息

    首先必须声明: GET方法支持通过Body携带参数(HTTP1.1开始支持) 但是默认的RestTemplate是不支持滴!原因如下: RestTemplate支持通过setRequestFactor ...

  10. [转帖]POW , POS 与 DPOS 一切都为了共识

    POW , POS 与 DPOS 一切都为了共识 https://www.jianshu.com/p/f99e8fe57c9a   共识机制的背景 加密货币都是去中心化的,去中心化的基础就是P2P节点 ...