html最多显示两行,css 实现两行或多行文本溢出显示省略号（...）

1. 大家都知道，强制一行溢出显示省略号(...)的情况很简单

overflow:hidden;//超出的隐藏

text-overflow:ellipsis;//显示省略符号来代表被修剪的文本。

white-space:nowrap;//不换行

2. 但是如果要强制两行甚至多行的话，需要用到css3的知识点

网上大多版本都是：

overflow: hidden; // 超出的文本隐藏

text-overflow: ellipsis; // 溢出用省略号显示

display: -webkit-box; // 将对象作为弹性伸缩盒子模型显示。

-webkit-line-clamp: 2; // 这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。

-webkit-box-orient: vertical; // 从上到下垂直排列子元素(设置伸缩盒子的子元素排列方式)

但是在实际项目中，我们会发现并没有效果，这是因为代码经过编译后就把 -webkit-box-orient: vertical 干掉了。所以最终的最好的解决方案：

overflow: hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: 2; //多行在这里修改数字即可

overflow:hidden;

/* autoprefixer: ignore next */

-webkit-box-orient: vertical;

html最多显示两行,css 实现两行或多行文本溢出显示省略号（...）相关推荐

css多行超出显示点_CSS实现单行、多行文本溢出显示省略号（…）
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; te ...
如何设置省略号对其序号 html,CSS实现单行、多行文本溢出显示省略号（…）
最好用max-height来限制一下web 若是实现单行文本的溢出显示省略号同窗们应该都知道用text-overflow:ellipsis属性来,固然还须要加宽度width属来兼容部分浏览.浏览器实 ...
CSS单行文本以及多行文本溢出显示省略号解决方案
CSS单行文本以及多行文本显示省略号解决方案文章目录 CSS单行文本以及多行文本显示省略号解决方案单行文本溢出显示省略号多行文本溢出显示省略号第一种效果:仅显示3行文本溢出部分显示省略号第二 ...
CSS实现单行、多行文本溢出显示省略号（…
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! < ...
css多行文本溢出显示省略号(…)
text-overflow:ellipsis属性可以实现单行文本的溢出显示省略号(-).但部分浏览器还需要加宽度width属性. css代码: overflow: hidden; text-overf ...
css实现多行文本溢出显示省略号(…)全攻略
省略号在ie中可以使用text-overflow:ellipsis了,但有很多的浏览器都需要固定宽度了,同时ff这些浏览器并不支持text-overflow:ellipsis设置了,下文来给各位整理一 ...
CSS常用技巧（元素显示隐藏、用户界面样式、垂直对齐、溢出文字省略号显示、精灵技术、滑动门、margin负值之美和css三角之美）
CSS常用技巧 CSS常用技巧(元素显示隐藏.用户界面样式.垂直对齐.溢出文字省略号显示.精灵技术.滑动门.margin负值之美和css三角之美) 1.元素显示隐藏 1.1display 显示(重点) ...
CSS+JS+Vue：单行、多行文本溢出显示省略号...的几种实现方式
背景:近期H5项目有个UI需求,单行文本超长时,超出的部分...省略且有一个查看的图标:否则正常展示. 在此背景下了总结下文本溢出的几种实现方式. 1.单行文本溢出[纯css] 效果: <!-- ...
CSS基础：单行和多行文本溢出显示省略号
文本溢出后很多,会显示一些省略号,这个在很多网站都会这样做,从技术层次来分析有两种,一种是前端通过css或者JavaScript进行进行,还有一种是后端传递文字的时候,本身处理完长度,然后返回一个嗲有 ...
纯CSS实现多行文本溢出显示省略号（兼容不同浏览器）
1.单行文本溢出显示省略号单行文本溢出显示省略号比较简单,设置white-space: nowrap避免换行,再设置text-overflow: ellipse即可. <style>.s ...

html最多显示两行,css 实现两行或多行文本溢出显示省略号（...）

html最多显示两行,css 实现两行或多行文本溢出显示省略号（...）相关推荐

最新文章

热门文章