<!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 查找数组中最接近的一个数字

    public static Integer getNumberThree(Integer[] intarray,Integer number){ int index = Math.abs(number ...

  2. hinkphp项目部署到Linux服务器上报错“模板不存在”如何解决

    检查了服务器上的文件,并没有缺少文件,再次上传文件到服务器,还是报错.莫名其妙,怀疑是代码问题. 仔细检查后,发现是模板的文件名问题: 用过TP的都知道:thinkphp会在$this->dis ...

  3. arcpy地理处理工具案例教程-生成范围-自动画框-深度学习样本提取-人工智能-AI

    arcpy地理处理工具案例教程-生成范围-自动画框-深度学习样本提取-人工智能-AI 商务合作,科技咨询,版权转让:向日葵,135-4855_4328,xiexiaokui#qq.com 目的:对面. ...

  4. java--poi读取excel图片和内容（支持03版本）

    有的时候需要将excel中所包含的图片在导入的时候取出来存到服务器中, 详细实现代码如下: package com.liuf.util; import java.io.BufferedInputStr ...

  5. JMH java基准测试

    Measure, don’t guess! JMH适用场景 JMH只适合细粒度的方法测试 原理 编译时会生成一些测试代码,一般都会继承你的类 maven依赖 <dependencies> ...

  6. electron-vue在使用element-ui时部分组件无法显示问题

    原文连接: https://juejin.im/post/5d132629e51d45772a49ad71 问题描述 在使用electron开发桌面系统时,遇到部分element-ui组件在页面中无法 ...

  7. pycharm 生成requirements.txt

    在命令行中输入 pip freeze>requirements.txt 1 安装requirements文件中的包 pip install -r requirements.txt

  8. PHP环境搭建-Windows系统下PHP环境搭建

    1.PHP环境搭建的前提是 Apache HTTP Server (Apache 服务器)已经安装部署成功,并可以正常访问到服务器的主页面.Apache HTTP Server 的安装部署已经在上一篇 ...

  9. 014-交互式Shell和shell脚本获取进程 pid

    Linux 的交互式 Shell 与 Shell 脚本存在一定的差异,主要是由于后者存在一个独立的运行进程 1.交互式 Bash Shell 获取进程 pid 在已知进程名(name)的前提下,交互式 ...

  10. PHP 1000个进程同时利用file_put_contents的追加FILE_APPEND模式

    1000个进程同时利用file_put_contents的追加FILE_APPEND模式,不会出现写入的数据被覆盖? <?php // fork出1000个进程查询,内存大,cpu屌,1000个 ...