正文 

当前位置： 首页 > 技术 > java教程

css这个就叫优雅|多行文本溢出省略(代码片段)

XianZhe_ XianZhe_     2023-01-11     274

关键词：

CSS 这个就叫优雅 | 多行文本溢出省略

文章目录

一、文本溢出省略方式

文本溢出省略的应用场景主要分为单行以及多行两种，如果只是为了单行省略，那么实现起来简单且兼容性最好，只需要写上这三个属性。

p 
  width: 20%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;


但既然你看到了这篇文章，那么我相信你很大概率是为了寻求多行文本溢出省略的方法，咱接着往下看。

补充： text-overflow属性值<string>和fade为实验性功能，大多数浏览器并不支持。

二、WebKit内核浏览器解决方法🥙

这个方法合适绝大多数WebKit内核浏览器或移动端，尽管语法很奇怪，但实现起来最简单方便，这正是我们所需要的。

<p>本报记者直击福田口岸，文锦渡口岸，以及深圳湾口岸等，有子女早早在口岸对面等待父母，有深港情侣两年未见终于战胜“时间”和疫情，有双胞胎儿子感叹终于可以陪伴父母更多时间，有母亲时隔三年从香港入境与儿子在深团聚，有香港居民在口岸出口挥舞国旗高声歌唱祖国……</p>

p 
  width: 20%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  /* 第三行溢出省略 */
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;


看到这里未免会好奇，display: -webkit-box;这个半生不熟的原始非标准化属性到底是啥，其实这是弹性盒子2009年草案的老语法W3C 2009年第1次草案。一定要明确的是，两者在使用效果上有略微区别，不能完全当同一种效果用。
-webkit-line-clamp属性可以把块容器中的内容限制为指定的行数，并且-webkit-box-orient属性设置成vertical时才有效果，它的规范目前是编辑草案，所以这意味着这里没有什么是一成不变的。
需要注意的是，如果被省略的文本全是数字或字母，那么就会存在换行失效的特例，好的消息是，可以通过word-break: break-all;属性来换行，让咱们补充上这个属性。

p 
  width: 20%;
  overflow: hidden;
  text-overflow: ellipsis;
  /* 数字或字母文本换行 */
  word-break: break-all;
  display: -webkit-box;
  /* 第三行溢出省略 */
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;

三、通用解决方法

考虑到不是所有浏览器都支持WebKit内核，以及版本的原因，难免会有一些兼容性问题，使用伪元素加定位的方式能够很好解决兼容性问题。

但这个方法也是有短板的：

  • 最明显的是得提前知道需要显示的行数并为其设置高度才行。
  • 省略号毕竟是盖到文字上面的，背景颜色需要于主题色匹配，不然就很尴尬了。

论效果来看，如果没有兼容性问题的话，还是建议使用 二、WebKit内核浏览器解决方法。

<p>本报记者直击福田口岸，文锦渡口岸，以及深圳湾口岸等，有子女早早在口岸对面等待父母，有深港情侣两年未见终于战胜“时间”和疫情，有双胞胎儿子感叹终于可以陪伴父母更多时间，有母亲时隔三年从香港入境与儿子在深团聚，有香港居民在口岸出口挥舞国旗高声歌唱祖国……</p>

p 
  position: relative;
  overflow: hidden;
  width: 20%;
  /* 正好三行, 1.2em为一行高度 */
  height: 3.6em;
  line-height: 1.2em;


p::after 
  content: "...";
  position: absolute;
  bottom: 0;
  right: 0;
  height: 1.2em;
  padding-left: .5em;
  text-align: right;
  /* 背景颜色需要于主题色匹配 */
  background: linear-gradient(to right, rgba(224, 239, 239, 0), rgba(224, 239, 239, 1) 50%);

四、CSS 预处理器封装🥩

在编写页面时，难免会用到文本溢出处理，但如果每遇到一次就要把上面的样式重新再写一次的话未免过于繁琐。如果你正在使用SCSS/LESS这种CSS预处理语言，那么我强烈建议你对其进行封装处理。
比较通用的做法是使用混入Mixins处理，这在LESS和SCSS里都是受支持的功能。当然并没有强制一定要用哪个，根据你的习惯和喜好自行选择即可。

LESS

// 文本溢出隐藏Mixin
// @line: 指定第几行隐藏
// @overflow: 溢出内容隐藏方式，默认ellipsis
.textHidden(@line: 1, @overflow: ellipsis) 
  overflow: hidden;
  text-overflow: @overflow;
  word-break: break-all;
  display: -webkit-box;
  -webkit-line-clamp: @line;
  -webkit-box-orient: vertical;


// 每次使用只需调用即可
p 
  .textHidden(2);

SCSS

// 文本溢出隐藏Mixin
// $line: 指定第几行隐藏
// $overflow: 溢出内容隐藏方式，默认ellipsis
@mixin textHidden($line: 1, $overflow: ellipsis) 
  overflow: hidden;
  text-overflow: $overflow;
  word-break: break-all;
  display: -webkit-box;
  -webkit-line-clamp: $line;
  -webkit-box-orient: vertical;


// 每次使用只需调用即可
p 
  @include textHidden(3);

五、参考资料💘

🍅因发布平台差异导致阅读体验不同，源文贴出：《CSS 这个就叫优雅 | 多行文本溢出省略》

六、推荐博文🍗

css单行或多行文本溢出显示省略号(代码片段)

...省略号。（有些浏览器需要加上指定的width）二、多行文本溢出省略适用于WebKit浏览器及 查看详情

css单行或多行文本溢出显示省略号(代码片段)

...省略号。（有些浏览器需要加上指定的width）二、多行文本溢出省略适用于WebKit浏览器及 查看详情

css单行或多行文本溢出显示省略号(代码片段)

...省略号。（有些浏览器需要加上指定的width）二、多行文本溢出省略适用于WebKit浏览器及 查看详情

css实现文本溢出省略（单行/多行）(代码片段)

...下代码：overflow:hidden;text-overflow:ellipsis;white-space:nowrap;多行如果文本可能多行，那么使用上面的代码就不行了，用上面的代码文本无论多长都只显示一行。这时候应该使用如下代码：display:-webkit-box;-webkit-box-orient:ver... 查看详情

css实现文本溢出省略（单行/多行）(代码片段)

...下代码：overflow:hidden;text-overflow:ellipsis;white-space:nowrap;多行如果文本可能多行，那么使用上面的代码就不行了，用上面的代码文本无论多长都只显示一行。这时候应该使用如下代码：display:-webkit-box;-webkit-box-orient:ver... 查看详情

css实现单行多行文本溢出显示省略号

...ow:hidden;2text-overflow:ellipsis;3white-space:nowrap;效果如图：但是这个属性只支持单行文本的溢出显示省略号，如果我们要实现多行文本溢出显示省略号呢。接下来重点说一说多行文本溢出 查看详情

纯css实现文本内容单行/多行溢出显示省略号

一般都知道css可以实现单行溢出限制，那么多行溢出的话，css该怎么去实现了，此例主要借助css的伪元素样式去实现的，具体代码和注释如下。​单行超出宽度限制溢出html代码：<divclass="text">css实现单行宽度限制溢出时出现... 查看详情

css实现单行多行文本溢出显示省略号（…）

...idden;text-overflow:ellipsis;white-space:nowrap; 效果如图：但是这个属性只支持单行文本的溢出显示省略号，如果我们要实现多行文本溢出显示省略号呢。接下来重点说一说多行文 查看详情

css实现单行多行文本溢出显示省略号（…）

...方法：overflow:hidden;text-overflow:ellipsis;white-space:nowrap;但是这个属性只支持单行文本的溢出显示省略号，如果我们要实现多行文本溢出显示省略号呢。实现方法：display:-webkit-box; 查看详情

css/js学习如何实现单行／多行文本溢出的省略（...）--老司机绕过坑道的正确姿势

...需求，在一个父级元素中隐藏一个可能过长的文本： 这个文本可能是单行的： 也可能是多行的： 下面我就给大家展示如何简单或优雅地实现这种需求 单行文本溢出的省略 先上代码<divstyle=‘width:400px;height:4... 查看详情

转载|css实现单行多行文本溢出显示省略号（…）

...idden;text-overflow:ellipsis;white-space: nowrap;效果如图：但是这个属性只支持单行文本的溢出显示省略号，如果我们要实现多行文本溢出显示省略号呢。接下来重点 查看详情

多行文本的溢出省略后,表格中的数据都挤到了第一列(代码片段)

...图改成了td里面的内容再包一个div，然后把给td的css给了这个div#overflowdisplay:-webkit- 查看详情

css文本溢出隐藏显示省略号（单行+多行）

文本超出若干行就换行，这个功能几乎每个文本浏览网站都会用到，实现它的办法也有很多，今天简单的介绍一下实现它的方法。 一.单行文本不换行，并将超出文本隐藏.box-content{    overflow:hidden;//文本溢出隐... 查看详情

css单行或多行文本溢出显示省略号(代码片段)

...省略号。（有些浏览器需要加上指定的width）二、多行文本溢出省略适用于WebKit浏览器及移动端；-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合... 查看详情

超详细的文本溢出添加省略号。。。。(代码片段)

...过不少，这富文本溢出什么鬼？老夫今天就好好研究一下这个省略号。　　ps：富文本溢出，不也是文本溢出么？空格处理？多段落？正文　　1.css写法　　1.1最简单的省略号（单行，溢出隐藏）　　poverflow:hidden;text-overflow:ellipsi... 查看详情

css实现单行多行文本溢出显示省略号（…）

...idden;text-overflow:ellipsis;white-space: nowrap;效果如图：但是这个属性只支持单行文 查看详情

文本溢出显示省略号之css(代码片段)

...略号，而溢出的情况通常为两种：单行文本溢出多行文本溢出（具体是在第几行根据具体业务而决定） 技术方案1.单行文本裁剪overflow:hidden;（文字长度超出限定宽 查看详情

文本溢出显示省略号之css(代码片段)

...略号，而溢出的情况通常为两种：单行文本溢出多行文本溢出（具体是在第几行根据具体业务而决定） 技术方案1.单行文本裁剪overflow:hidden;（文字长度超出限定宽 查看详情