资讯专栏INFORMATION COLUMN

css文本内容显示省略号

whlong / 863人阅读

摘要:文字显示省略号但是这个属性只支持单行文本的溢出显示省略号,如果我们要实现多行文本溢出显示省略号呢。

文字显示省略号
width: 4.5rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

 

但是这个属性只支持单行文本的溢出显示省略号,如果我们要实现多行文本溢出显示省略号呢。 
实现方式如下

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

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

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

相关文章

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

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

    wing324 评论0 收藏0
  • css实现单行、多行文本超出显示略号

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

    paulquei 评论0 收藏0
  • css实现单行、多行文本超出显示略号

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

    maxmin 评论0 收藏0
  • CSS单行、多行文本溢出显示略号

    摘要:单行文本溢出显示省略号需要对容器设置单行高度多行文本溢出显示省略号浏览器或移动端的页面在浏览器或移动端绝大部分是内核的浏览器可以直接使用的扩展属性是私有属性注意这是一个不规范的属性,它没有在的规范草案中用来限制在一个块元素显 单行文本溢出显示省略号 overflow:hidden; text-overflow:ellipsis; white-space:nowrap; (需要对容器设置...

    PiscesYE 评论0 收藏0

发表评论

0条评论

whlong

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<