文本溢出省略號不適用於Firefox和IE瀏覽器中的多行

Question

我試圖執行省略號幾行後。我已經實現這個

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

嘗試增加white-space: nowrap;

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

Answer 2

因爲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"> 
 
\t <p class="P_One"> 
 
\t \t 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 
 
\t \t 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. 
 
\t </p> 
 
</div> 
 
<div class="Two"> 
 
\t <p class="P_Two"> 
 
\t \t Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
 
\t </p> 
 
</div>

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; 
} 

希望這會爲你工作。