【前端芝士树】纯CSS实现多行文本溢出显示省略号

CNZPH 发布于2019-08-30 15:54 / 3617人阅读

摘要：前端芝士树纯实现多行文本溢出显示省略号使用来控制行数由于用来限制在一个块元素显示的文本的行数这是一个不规范的属性，它没有出现在规范草案中，为了实现该效果，它需要组合其他外来的属性。

【前端芝士树】纯CSS实现多行文本溢出显示省略号

使用-webkit-line-clamp来控制行数

由于-webkit-line-clamp 用来限制在一个块元素显示的文本的行数,这是一个不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中，为了实现该效果，它需要组合其他外来的 WebKit 属性。

overflow: hidden;
text-overflow: ellipsis; //文本溢出时，用省略号“…”隐藏超出范围的文本。
display: -webkit-box; //将对象作为弹性伸缩盒子模型显示
-webkit-box-orient: vertical; //设置或检索伸缩盒对象的子元素的排列方式

-webkit-line-clamp: 2; //控制文本的行数

该段样式在 vue 或者 angular 项目中会失效，因为代码构建过程中使用了 autoprefixer

-webkit-box-orient 是过时的 flexbox 语法，现在它已经转化为了 flex-direction。
人们对 Autoprefixer 感到恼火的原因是因为 Autoprefixer 破坏了 line-clamp 的使用， 并且这个问题已经存在了很长一段时间。
但是，使用旧的过时的 flexbox 语法是 line-clamp 在任何-webkit-浏览器中处理多行溢出的唯一纯 CSS 方法。

Autoprefixer 作者的意见如下

是的，我知道 line-claimp 这个属性。我个人不喜欢 webkite-only 的事情。所以我不想花费我的时间而允许人们去做这个事情（但是可以通过/* autoprefixer: ignore next */或者/* autoprefixer: off */ 让 autoprefixer去忽略这个属性的检查）。
但如果有人解决 webkit-only 的问题，我会去 fix 这个属性的检查。

所以最后的开发代码如下：

/* autoprefixer: off */
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;

-webkit-line-clamp: 2;

参考文献
《多行文本溢出显示省略号(…)全攻略-WEB前端开发》
《Ask not to remove the code: -webkit-box-orient · Issue #1141 · postcss/autoprefixer》

GPU云服务器云服务器 php文本溢出省略省略号css css省略纯CSS

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117036.html

CSS - 纯css实现多行文本溢出省略（兼容所有浏览器）

摘要：前言多行文本超出高度限制出现省略号移动端多为内核的有扩展属性但并不是规范中的属性端往往要借助去实现这一效果，但麻烦且不是很靠谱，今天就用纯来实现一个完全兼容的多行省略。前言多行文本超出高度限制出现省略号 , 移动端多为webkit内核的 , 有扩展属性-webkit-line-clamp , 但并不是CSS规范中的属性 , PC端往往要借助js去实现这一效果，但麻烦且不是很靠谱，今...

李义 2019-08-29 12:21 评论0 收藏0
【芝士整理】CSS基础图谱

摘要：为了实现文字环绕效果，规范规定的措施是使父容器塌陷，元素脱离文档流浮动产生，元素周围的内容转换为围绕元素排列。选择器注意点属性选择器 [attr^=value] - 开头或全等 [attr$=value] - 结尾或全等 [attr*=value] - 包含值 [attr~=value] - 字符串包含选择器组 A > B - 直接子节点 A + B - 下一个兄弟节点 A...

iOS122 2019-08-30 15:54 评论0 收藏0
前端面试题-文本溢出显示省略号（...）

摘要：当文本溢出包含元素时，显示省略符号来代表被修剪的文本。文本不会换行，文本会在在同一行上继续，直到遇到标签为止。说明限制在一个块元素显示的文本的行数。将对象作为弹性伸缩盒子模型显示。，在多行文本的情况下，用省略号隐藏超出范围的文本。一、文本溢出隐藏如下图所示，我们需要对溢出文本进行...显示的操作，单行多行的情况都有（具体几行得看设计的心情） showImg(https://segm...

AprilJ 2019-08-30 14:08 评论0 收藏0
前端面试题-文本溢出显示省略号（...）

摘要：当文本溢出包含元素时，显示省略符号来代表被修剪的文本。文本不会换行，文本会在在同一行上继续，直到遇到标签为止。说明限制在一个块元素显示的文本的行数。将对象作为弹性伸缩盒子模型显示。，在多行文本的情况下，用省略号隐藏超出范围的文本。一、文本溢出隐藏如下图所示，我们需要对溢出文本进行...显示的操作，单行多行的情况都有（具体几行得看设计的心情） showImg(https://segm...

Donald 2019-08-22 15:20 评论0 收藏0
前端面试题-文本溢出显示省略号（...）

摘要：当文本溢出包含元素时，显示省略符号来代表被修剪的文本。文本不会换行，文本会在在同一行上继续，直到遇到标签为止。说明限制在一个块元素显示的文本的行数。将对象作为弹性伸缩盒子模型显示。，在多行文本的情况下，用省略号隐藏超出范围的文本。一、文本溢出隐藏如下图所示，我们需要对溢出文本进行...显示的操作，单行多行的情况都有（具体几行得看设计的心情） showImg(https://segm...

CHENGKANG 2019-08-01 18:41 评论0 收藏0