html - 文本溢出省略号不适用于 Firefox 和 IE 浏览器中的多行

Question

我试图在几行之后实现Ellipsis。我已经实现了这个

https://jsfiddle.net/eqo74h3p/1/

它在 Chrome 中工作，但在 Firefox、IE 中不工作。

CSS

 line-height: 1.7;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;

Answer 1

因为 Firefox 不支持 webkit-line-clamp(然后不显示省略号)，我们可以使用 ::after 选择器(没有 text-overflow: ellipsis; 和 -webkit-line-clamp: 4;)，像这样:

对于 Firefox(也适用于 IE 或其他浏览器):

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

我们可以使用一些 Jquery 技巧来仅在需要时添加 ellipsis。 (只是一个想法)

看这个简单的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>