<!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. sumdoc t411 dir.txt

    C:\Users\zhoufeiyue\Documents\sumdoc t411\(9+条消息)redis Jedis存取list对象和map - shenjianxz的博客 - CSDN博客.mh ...

  2. git 常用命令的总结

    1. git 查看分支 git branch (星号代表当前的分支) 2. 创建一个本地分支 git checkout -b 分支名称 3. 将本地新建分支提交到远程 git push origin ...

  3. CentOS 使用官方源yum安装最新nginx版本

    CentOS 使用官方源yum安装最新nginx版本 1.创建nginx.repo # vi /etc/yum.repos.d/nginx.repo 2.添加内容#如果是CentOS6,文件内容如下: ...

  4. http 请求方式解析

    表单中<form></form>, 如果使用method="get"方式提交,则不会指定请求体编码方式.默认请求参数使用?拼接到url之后.如:http:/ ...

  5. Spring使用多个 <context:property-placeholder/>

    Spring中报"Could not resolve placeholder"的解决方案(引入多个properties文件) 解决方案: (1) 在Spring 3.0中,可以写: ...

  6. docker批量删除镜像

    docker rmi `docker images | grep swb | grep -v grep | awk '{print $3}'` 参考: https://blog.csdn.net/hi ...

  7. Windows下启动、重启、停止nginx

    在Windows下操作nginx,需要打开cmd 进入到nginx的安装目录下 1.启动nginx: start nginx 或 nginx.exe 2.停止nginx(stop是快速停止nginx, ...

  8. 【翻译】Flink Table Api & SQL — Hive —— 读写 Hive 表

    本文翻译自官网:Reading & Writing Hive Tables  https://ci.apache.org/projects/flink/flink-docs-release-1 ...

  9. NET高级开发工程师职责要求

    岗位职责1.参与架构以及核心业务的设计:2.使用简单,干净,可维护性高,扩展性好的代码实现产品功能,并在必要时重构现有代码:3.贯彻面向接口以及模块化组件的设计理念:4.熟练RabbitMQ.ES.M ...

  10. WinForm自动记录从上次关闭位置启动窗体

    次功能主要是通过在注册表中读写窗体的Location属性来实现的.在窗体关闭前处理窗体的FormClosed事件,将窗体的Location属性值写入注册表,然后在窗体的Load事件中从注册表中读取保存 ...