css之字体多行省略(兼容大部分浏览器)

字体单行显示省略号

  <style>
.box1{
width: 500px;
height: 1.5em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
<div class="box1">
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
</div>

字体多行显示省略号

文本框盒子定义了宽高之后,设置它的右边距一个字符的宽度,用来显示省略号。设置文本框的盒子伪类before来显示省略号。使用绝对定位让它在右下角。

当然,它会一直显示在右下角,然后可以使用伪类after来遮住省略号,因为after是行内元素,它会跟着在文本的末端,设置它宽高为一个字符,当文本超出的的时候它会被超出部分隐藏。文本没有超出的时候,设置让它绝对定位,当字体没有超出文本盒子,它就会遮住省略号,当然after的背景色要与文本盒子的背景色一致!

<style>
.box{
position: relative;
width: 100%;
height: 3em; /* 高度是行高的几倍就是几行显示省略号 */
line-height: 1.5em;
font-size: 20px;
overflow: hidden;
padding-right: 1em;
box-sizing: border-box;
word-break: break-all;
background-color: white;
}
.box:before{
content: '...';
position: absolute;
right: 0;
bottom: 0;
}
.box:after{
position: absolute;
content: "";
margin-top: 0.5em;
right: 0;
width: 1em;
height: 1em;
background-color: white; //文本框的背景色一致
}
</style>
<div class="box">
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
</div>

  

css兼容大部分浏览器的文本超出部分显示省略号的更多相关文章

  1. CSS实现不换行/自动换行/文本超出隐藏显示省略号

    在写页面的时候,我们经常会需要用到关于文本的换行,强制换行以及显示几行超过显示省略号等,今天我们就对这些问题来做个汇总吧! 1.自动换行 div{ word-wrap:break-word; word ...

  2. CSS——文本超出隐藏显示省略号

    文本超出隐藏显示省略号 1.单行文本的溢出显示省略号 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; // overflo ...

  3. css文本超出隐藏显示省略号

    p style="width: 300px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"> 如 ...

  4. CSS3文本超出容器显示省略号之text-overflow属性

    text-overflow:ellipsis; overflow:hidden; white-space:nowrap; 要想实现文本超出容器时显示省略号,上面3个属性必须同时搭配使用

  5. CSS3 文本超出后显示省略号...

    纯用CSS实现,主要采用代码 overflow:hidden; text-overflow:ellipsis;//这是让文本溢出后,显示成省略号. white-space:nowrap;//禁止自动换 ...

  6. 使用js控制文本超出部分显示省略号

    js代码 // 字数限制30字,超出不显示 fontNumber (date) { const length = date.length if (length > 30) { var str = ...

  7. css 文本超出范围显示省略号

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. HTML5 元素文字超出部分显示省略号(支持多行),兼容几乎所有常用浏览器

    1,公共样式,在公共的 CSS 文件中加入以下内容  /* 超出部分显示省略号,支持多行 */ .text-ells:before { content: ''; float: left; width: ...

  9. css gray,grayscale,css变灰兼容大部分浏览器

    css gray,grayscale,css变灰兼容大部分浏览器 html { filter: url("data:image/svg+xml;utf8,<svg xmlns=\'ht ...

随机推荐

  1. Java实现 蓝桥杯VIP 算法提高 任意年月日历输出

    算法提高 任意年月日历输出 时间限制:1.0s 内存限制:512.0MB 已知2007年1月1日为星期一. 设计一函数按照下述格式打印2007年以后(含)某年某月的日历,2007年以前的拒绝打印. 为 ...

  2. Java实现 LeetCode 22 括号生成

    22. 括号生成 给出 n 代表生成括号的对数,请你写出一个函数,使其能够生成所有可能的并且有效的括号组合. 例如,给出 n = 3,生成结果为: [ "((()))", &quo ...

  3. Java实现回文判断

    1 问题描述 给定一个字符串,如何判断这个字符串是否是回文串? 所谓回文串,是指正读和反读都一样的字符串,如madam.我爱我等. 2 解决方案 解决上述问题,有两种方法可供参考: (1)从字符串两头 ...

  4. Java实现第十届蓝桥杯矩形切割

    试题 B: 矩形切割 本题总分:5 分 [问题描述] 小明有一些矩形的材料,他要从这些矩形材料中切割出一些正方形. 当他面对一块矩形材料时,他总是从中间切割一刀,切出一块最大的正方 形,剩下一块矩形, ...

  5. java实现第八届蓝桥杯生命游戏

    生命游戏 题目描述 康威生命游戏是英国数学家约翰·何顿·康威在1970年发明的细胞自动机. 这个游戏在一个无限大的2D网格上进行. 初始时,每个小方格中居住着一个活着或死了的细胞. 下一时刻每个细胞的 ...

  6. Java Review (一、Java开发环境)

    @ 目录 Java程序运行机制 高级语言运行机制 编译型语言 解释型语言 Java运行机制和JVM 编写 编译 运行 Java开发工具包 JDK JRE JDK.JRE与JVM HelloWord 编 ...

  7. 曹工说JDK源码(3)--ConcurrentHashMap,Hash算法优化、位运算揭秘

    hashcode,有点讲究 什么是好的hashcode,一般来说,一个hashcode,一般用int来表示,32位. 下面两个hashcode,大家觉得怎么样? 0111 1111 1111 1111 ...

  8. Github即将破百万的PDF:编写高质量代码改善JAVA程序的151个建议

    在通往"Java技术殿堂"的路上,本书将为你指点迷津!内容全部由Java编码的最佳 实践组成,从语法.程序设计和架构.工具和框架.编码风格和编程思想等五大方面,对 Java程序员遇 ...

  9. CentOS7.5搭建spark2.3.1集群

    一 下载安装包 1 官方下载 官方下载地址:http://spark.apache.org/downloads.html 2  安装前提 Java8         安装成功 zookeeper  安 ...

  10. C# 9.0 新特性之目标类型推导 new 表达式

    阅读本文大概需要 2 分钟. 呼~~,每次过完一个周末,写作就失去了动力,一两天才能缓过来.尽管如此,还是要坚持写好每一篇文章的.宁缺毋滥嘛,宁愿发文的频率低一点,也要保证文章的质量,至少排版不能差, ...