<!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. linux中高并发socket最大连接数的优化详解

    linux中高并发socket最大连接数的优化详解 https://m.jb51.net/article/106546.htm?from=singlemessage

  2. Python示例项目学习

    原文地址:http://www.360doc.com/showweb/0/0/874025604.aspx 「 Python3 实现火车票查询工具 」   相信很多人学Python都是冲着它强大的爬虫 ...

  3. Visionworks OpenVX

    [TOC] Visionworks OpenVX OpenVX heterogeneous computation framework Spec OpenVX 1.2源碼解析 - 目錄結構 除了官方的 ...

  4. Android ConstraintLayout 小记

    * 可以圆形定位view之间的位置,通过View的中心,来定位不同半径和弧度的距离. layout_constraintCircle : references another widget id la ...

  5. RedHat 7关闭防火墙方法

    1.在之前的版本中关闭防火墙等服务的命令是 service iptables stop /etc/init.d/iptables stop 2.RHEL7开始,使用systemctl工具来管理服务程序 ...

  6. 一个流行的网页动画JS库

    animejs https://animejs.com/ Anime.js (/ˈæn.ə.meɪ/) is a lightweight JavaScript animation library wi ...

  7. Python线程池及其原理和使用（超级详细）

    系统启动一个新线程的成本是比较高的,因为它涉及与操作系统的交互.在这种情形下,使用线程池可以很好地提升性能,尤其是当程序中需要创建大量生存期很短暂的线程时,更应该考虑使用线程池. 线程池在系统启动时即 ...

  8. 【Spring Boot学习之八】发布打包

    环境 eclipse 4.7 jdk 1.8 Spring Boot 1.5.2 一.打jar类型1.指定主程序入口,否则运行报错:没有主清单属性pom.xml: <build> < ...

  9. [ARM-Linux开发]Linux open函数

    Linux open函数 open 函数用于打开和创建文件.以下是 open 函数的简单描述 #include <fcntl.h> int open(const char *pathnam ...

  10. 研发的困境----DEVOPS

    1.研发的困境 互联网的环境 互联网这个环境比较特别,包括现在不只是互联网,就算是被互联网赋能的这些“互联网+”的企业也在改变,用户在发生变化,用户构成的群体在发生变化,群体造成场景的变化,场景营造新 ...