资讯专栏INFORMATION COLUMN

css H5端多行文本实现省略号

褰辩话 / 1009人阅读

摘要:这是改变行数的用来限制在一个块元素显示的文本的行数。为了实现该效果,它需要组合其他的属性。常见结合属性必须结合的属性,将对象作为弹性伸缩盒子模型显示。,可以用来多行文本的情况下,用省略号隐藏超出范围的文本。

overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;  // 这是改变 行数的
-webkit-box-orient: vertical;

-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。

常见结合属性:

display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。

-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。

text-overflow: ellipsis;,可以用来多行文本的情况下,用省略号“…”隐藏超出范围的文本 。

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

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

相关文章

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

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

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

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

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

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

    maxmin 评论0 收藏0
  • 文章- 收藏集 - 掘金

    摘要:我的职业是前端工程师入门不是应该很简单吗前端掘金入门前端,是一件很难的事吗在今天,我也没有想好一个答案,也不知道怎样给出一个答案。其他不多说了,这次的内容主要深入理解及应用前端掘金几种常见的边框用法。 GitHub 上学习前端开发的资料(不定期更新) - 前端 - 掘金GitHub 上学习前端开发的资料(不定期更新)... JS 进阶篇: 这可能是关于闭包最好的一篇文章 - 前端 - ...

    sugarmo 评论0 收藏0

发表评论

0条评论

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