CSS文本省略显示

HackerShell 发布于2019-08-30 13:59 / 2283人阅读

摘要：当页面上有过多文字的时候，往往需要省略显示，可以很方便的做到这点。单行文本省略显示需要固定一个宽度多行文本省略显示适用于浏览器和移动端设置需要显示的行数

当页面上有过多文字的时候，往往需要省略显示，CSS可以很方便的做到这点。

单行文本省略显示

width: 68%; // 需要固定一个宽度
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

多行文本省略显示(适用于WebKit浏览器和移动端)

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; // 设置需要显示的行数
overflow: hidden;

GPU云服务器云服务器 css省略省略号css php文本溢出省略 html省略显示

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

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

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

摘要：前言项目中我们经常遇到这种需求，需要对单行多行文本超出显示为省略号。单行文本省略文本溢出显示省略号文本不会换行语法默认值适用于所有元素当对象内文本溢出时不显示省略标记，而是将溢出的部分裁切掉。前言：项目中我们经常遇到这种需求，需要对单行、多行文本超出显示为省略号。这篇文章主要总结了小编解决此问题的方法，有不足之处欢迎大家指正。单行文本省略 showImg(https://segme...

wing324 2019-08-02 12:05 评论0 收藏0
css实现单行、多行文本超出显示省略号

摘要：前言项目中我们经常遇到这种需求，需要对单行多行文本超出显示为省略号。单行文本省略文本溢出显示省略号文本不会换行语法默认值适用于所有元素当对象内文本溢出时不显示省略标记，而是将溢出的部分裁切掉。前言：项目中我们经常遇到这种需求，需要对单行、多行文本超出显示为省略号。这篇文章主要总结了小编解决此问题的方法，有不足之处欢迎大家指正。单行文本省略 showImg(https://segme...

paulquei 2019-08-29 17:20 评论0 收藏0
css实现单行、多行文本超出显示省略号

摘要：前言项目中我们经常遇到这种需求，需要对单行多行文本超出显示为省略号。单行文本省略文本溢出显示省略号文本不会换行语法默认值适用于所有元素当对象内文本溢出时不显示省略标记，而是将溢出的部分裁切掉。前言：项目中我们经常遇到这种需求，需要对单行、多行文本超出显示为省略号。这篇文章主要总结了小编解决此问题的方法，有不足之处欢迎大家指正。单行文本省略 showImg(https://segme...

maxmin 2019-08-26 13:24 评论0 收藏0
如何让文本只显示两行——块级文字省略

摘要：在页面显示中我们经常会需要进行省略，比如简介里面的省略，比如固定中字数超过限制之后的省略。单行文字的省略单行文字省略比较简单。在页面显示中我们经常会需要进行省略，比如简介里面的省略，比如固定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