多行省略号（使用碰到问题解决）

html

<div class="text">55555555555555555555555555555555555555555555555</div>

css

.text {width: 434rpx; //兼容浏览器，有些浏览器不设置宽度有问题height: 88rpx;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;}

当实现到这里，发现还是没有多行省略，
像这样！！！

方法：
1.先把所有的css删除，看看你设置div的元素文本会不会换行还是内容一直一行的往下走，只设置一个宽度就行，最后你会发现是这样

找到问题，证明这个div里的内容一直是单行输出，
于是给下面一个强制换行的css;
#重要！！！！！！！！！！！！！！！！！！！！！

word-wrap: break-word;

最后完美解决

整体代码

width:343rpx
word-wrap: break-word;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;

多行省略号（使用碰到问题解决）相关推荐

多行省略号不显示的问题
最近做的项目中遇到一个很奇葩的事情,在我电脑上多行省略号是正常显示的,但是在测试人员的电脑上竟然不显示,怪不得叫测试机,哈哈.上网百度发现有人遇到同样的问题,在最下面的小字当中发现了答案,话不多说直接 ...
css不换行省略号没作用,flex布局下，css设置文本不换行时，省略号不显示的解决办法...
大致是有一个 main 容器是 flex 布局,左边一个 logo 固定宽高,右边 content 动态宽度. a name a info Lorem ipsum dolor sit amet, co ...
CSS文字溢出省略号，单行省略号，多行省略号
有些时候在文章列表的页面,文章标题只要显示固定宽度,那么我们就需要把多余的文字省略掉,这个时候就需要用省略号处理. 一.单行省略号设置 <style> .text{overflow: hi ...
CSS 省略号（单行省略号、多行省略号）
单行省略号用法: 为已有宽度的盒子添加属性: 属性取值解释 white-space nowrap 让文字在一行内显示, 不换行 overflow hidden 当内容超过盒子宽度, 隐藏溢出部分 ...
css实现多行省略号
大家应该都知道用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(-).当然部分浏览器还需要加宽度width属性.那么利用css如何实现多行省略号呢?利用-webki ...
css多行省略号兼容ie,css超出2行部分省略号……，兼容ie
html> Page Title .wrap { height: 40px; line-height: 20px; overflow: hidden; } .wrap .text { float ...
文本超出显示省略号/数字英文字母折行有关css 属性/显示两行，第二行省略号显示css方法...
文本超出显示省略号: 定容器宽度 overflow: hidden; text-overflow: ellipsis; 文本超出显示省略号 white-space:nowrap; 强制文本不换行折 ...
css 文字第二行省略号,第二行的css省略号
工作text-overflow: ellipsis;的要求是white-space(pre,nowrap等)的单行版本.这意味着文本永远不会到达第二行. 人机工程学.在纯CSS中不可能. 当我刚才寻找 ...
如何设置文本不换行省略号显示等CSS常用文本属性
如何让多余的文本省略号显示首先要说几个属性的作用: whitespace:nowrap 中文行末不断行显示 overflow: 控制超出文本的显示方式:hidden 超出范围文本隐藏:scroll 始 ...

多行省略号（使用碰到问题解决）

多行省略号（使用碰到问题解决）相关推荐

最新文章

热门文章