Text-Overflow Ellipsis不适用于Firefox和IE浏览器中的多行

Question

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

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

它适用于Chrome，但不适用于Firefox，IE。

CSS

res = []
count = 0
for win in g['WINNINGS']:
    if win == 0:
        res.append(count)
        count+=1
    else:
        res.append(count)
        count = 1
g['VICTORY_LAST']= res

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>

  

即使是单行显示点数

我们可以做一些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>

Answer 2

尝试添加white-space: nowrap;

https://jsfiddle.net/eqo74h3p/2/

Answer 3

为什么你的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;
}

希望这对你有用。