css实现字数超过指定行数显示省略号...

lemon 发布于2019-08-30 15:53 / 2118人阅读

摘要：比如不超过两行就全部显示，超过两行就把多余的字隐藏并显示省略号。为了实现该效果，它需要组合其他外来的属性。如果标签内是英文字符当标签内是英文字符的时候你就会发现样式失效了。英文是不会自动换行的，所以添加如下属性以兼容英文字符。

问题描述

很多时候都会遇到有字数控制的需求。比如不超过两行就全部显示，超过两行就把多余的字隐藏并显示省略号。利用-webkit-line-clamp属性可以很简单的实现这个需求。

关于-webkit-line-clamp属性

限制在一个块元素显示的文本的行数。
-webkit-line-clamp 是一个不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。

为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性：

display: -webkit-box; 必须结合的属性 将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient 必须结合的属性 设置或检索伸缩盒对象的子元素的排列方式。
text-overflow 可以用来在多行文本的情况下，设定超出范围的文本的隐藏方式。如text-overflow:ellipsis就是用省略号“...”隐藏超出范围的文本。

如果标签内是英文字符

当标签内是英文字符的时候你就会发现样式失效了。英文是不会自动换行的，所以添加如下属性以兼容英文字符。

word-wrap:break-word;
word-break:break-all;

开发中遇到的小问题： 失踪的代码～～～

我在vue文件中的style区域写了如下的less代码，但是当我启动项目到chrome浏览器查看效果的时候，却发现失踪了一行代码： -webkit-box-orient: vertical;。导致我样式失效...

.linecamp{
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; 
  word-wrap:break-word;
  word-break:break-all;
}

解决方案

最后找了半天原因，改了好久webpack配置都没有解决问题。后来经大神指点，是因为我这段less代码写在了vue文件里，而项目编译时vue调postcss对less进行处理的时候把这行代码删掉了。

我把这段代码抽离到了index.less里面，在vue文件直接引用这个样式类linecamp。代码出现～问题消失～

也算是很灵异的一个问题了，长见识～～

GPU云服务器云服务器省略号css 指定行数 css省略 html省略显示

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

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

如何让文本只显示两行——块级文字省略

摘要：在页面显示中我们经常会需要进行省略，比如简介里面的省略，比如固定中字数超过限制之后的省略。单行文字的省略单行文字省略比较简单。在页面显示中我们经常会需要进行省略，比如简介里面的省略，比如固定div中字数超过限制之后的省略。我们可以用css轻松做到。单行文字的省略单行文字省略比较简单。关键代码如下： .single { width: 280px; ...

BetaRabbit 2019-08-30 15:55 评论0 收藏0
如何让文本只显示两行——块级文字省略

摘要：在页面显示中我们经常会需要进行省略，比如简介里面的省略，比如固定中字数超过限制之后的省略。单行文字的省略单行文字省略比较简单。在页面显示中我们经常会需要进行省略，比如简介里面的省略，比如固定div中字数超过限制之后的省略。我们可以用css轻松做到。单行文字的省略单行文字省略比较简单。关键代码如下： .single { width: 280px; ...

zollero 2019-08-23 15:18 评论0 收藏0
实现文字的省略号

摘要：允许内容顶开指定的容器边界内容将在边界内换行。如果需要，词内换行也会发生正在努力学习中，若对你的学习有帮助，留下你的印记呗点个赞咯往期好文推荐判断和及端打包有面试题纯实现瀑布流多列及布局在项目中有涉及实现一行或者第几行后加省略号，在实现第几行后加省略号的时候，使用的是-webkit-line-clamp、-webkit-box-orient属性，会出现webpack打包-webkit...

beanlam 2019-08-23 12:21 评论0 收藏0
文本溢出显示省略号

摘要：一单行文本溢出前提要设置宽度超出隐藏省略号不换行二多行文本溢出方法一利用定位实现。该方法适用范围广，但文字未超出行的情况下也会出现省略号可结合优化该方法。设置显示获取字符串的字数截取字符串多余的用省略号显示参考文章链接一、单行文本溢出 width: 300px;/*前提要设置宽度*/ overflow: hidden;/*超出隐藏*/ text-overflow: ellipsis;...

BDEEFE 2019-08-22 18:19 评论0 收藏0