[英]Text-Overflow Ellipsis not working for multi-lines in Firefox and IE browsers
I am trying to implement Ellipsis after few lines. 我试图在几行之后实现省略号 。 I have implemented this 我实现了这个
https://jsfiddle.net/eqo74h3p/1/ https://jsfiddle.net/eqo74h3p/1/
It is working in Chrome but not in Firefox, IE. 它适用于Chrome,但不适用于Firefox,IE。
css CSS
line-height: 1.7;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
Because Firefox doesn't support webkit-line-clamp
(then doesn't show ellipsis), we can do some tricks with ::after
selector (without text-overflow: ellipsis;
and -webkit-line-clamp: 4;
), something like this: 因为Firefox不支持webkit-line-clamp
(然后不显示省略号),我们可以用::after
选择器做一些技巧(没有text-overflow: ellipsis;
和-webkit-line-clamp: 4;
),这样的事情:
p { border: 1px solid black; padding: 15px; width: 400px; height: 85px; max-height:72px; line-height: 21px; margin: 0 0 15px 0; font-size: 14px; position:relative; overflow: hidden; display: -webkit-box; word-break: break-all; } p::after { letter-spacing: .10em; content:"..."; position:absolute; bottom:0; right:-10px; padding:0 11px 4px 45px; }
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
It is showing dots even if it is a single line 即使它是单行也显示点
We can do some Jquery tricks to add ellipsis
only if needed. 我们可以做一些Jquery技巧,只在需要时添加ellipsis
。 (Just an Idea) (只是一个想法)
See this simple DEMO to explain my idea, I hope it helps. 看到这个简单的DEMO解释我的想法,我希望它有所帮助。
var el = $('.P_One'); var bo = $('.One'); var el2 = $('.P_Two'); var bo2 = $('.Two'); if (el.get(0).scrollHeight > bo.height()) { document.styleSheets[0].addRule('.P_One::after','content:"..."; letter-spacing: .10em; position:absolute; bottom:0; right:-10px; padding:0 11px 4px 45px;'); } if (el2.get(0).scrollHeight > bo2.height()) { document.styleSheets[0].addRule('.P_Two::after','content:"..."; letter-spacing: .10em; position:absolute; bottom:0; right:-10px; padding:0 11px 4px 45px;'); }
.One{ width: 400px; height: 85px; max-height:72px; margin-bottom:40px; } .P_One, .P_Two { border: 1px solid black; padding: 15px; width: 400px; height: 85px; max-height:72px; line-height: 21px; margin: 0 0 15px 0; font-size: 14px; position:relative; overflow: hidden; display: -webkit-box; word-break: break-all; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="One"> <p class="P_One"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </div> <div class="Two"> <p class="P_Two"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> </div>
Try adding white-space: nowrap;
尝试添加white-space: nowrap;
https://jsfiddle.net/eqo74h3p/2/ https://jsfiddle.net/eqo74h3p/2/
Well there are some few reasons for why your CSS is not working, use my css setting below for the right way: 那么你的CSS无法正常工作有几个原因,请按照以下方式使用我的css设置:
p {
border: 1px solid black;
padding: 10px;
display: -webkit-box; // use this not the block
height: 85px; // change this lower then the lines you have
margin: 0 0 15px 0;
font-size: 14px;
line-height: 17px; // use pixels nog 1.7
-webkit-line-clamp: 4; // use this and put in more lines then 4.
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
}
Hopefully this will work for you. 希望这对你有用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.