CSS多行省略號跨瀏覽器

Question

我的網頁上有一個「div」，它具有固定的寬度和高度。

以下CSS只適用於單行文本：

overflow: hidden; 
text-overflow: ellipsis; 
white-space: nowrap; 

我怎樣才能在多行文本適用省略號上的文本內該div使用純CSS跨瀏覽器兼容？

Answer 1

你可以在僞類之後使用一些解決它。由於text-overflow: ellipsis不呈現相同的跨瀏覽器，我們正在使用您可以提供給:after類的內容屬性添加省略號。當我們設置white-space: nowrap到p我們需要添加div:after「黑客」，以確保文本進行裁剪其中填充集

HTML：

<div> 
    <p>This is a text that clips to ellipsis because it is long</p> 
    <p>This is a text that clips to ellipsis because it is long</p> 
</div> 

CSS

div { 
width: 200px; 
padding: 20px; 
border: 1px solid #ccc; 
overflow: hidden; 
position: relative; 
} 

//Solves the overflow issue of the white-space: nowrap 
div:after { 
content: ''; 
position: absolute; 
top: 0; 
right: 0; 
bottom: 0; 
width: 20px; 
background: #fff; 
z-index: 1; 
} 

p { 
white-space: nowrap; 
display: inline-block; 
} 

p:after { 
content: '...'; 
position: absolute; 
right: 5px; 
z-index: 2; 
} 

JSFiddle

編輯

我可以看到，我可能會誤解你的問題有點。我的代碼將修復跨瀏覽器省略號渲染，但不適用於多行文本。看看這個職位更多的答案在你的特定主題：Limit text length to n lines using CSS: Stack Overflow

Answer 2

試試這個例子：

display: block; /* Fallback for non-webkit */ 
display: -webkit-box; 
max-width: 400px; 
height: $font-size*$line-height*$lines-to-show; /* Fallback for non-webkit */ 
margin: 0 auto; 
font-size: $font-size; 
line-height: $line-height; 
-webkit-line-clamp: $lines-to-show; 
-webkit-box-orient: vertical; 
overflow: hidden; 
text-overflow: ellipsis; 

http://codepen.io/martinwolf/pen/qlFdp

或去dotdotdot.js

Answer 3

壞CSS不支持跨瀏覽器的多行夾持，只有WebKit似乎在推動它。任何其他的黑客解決方案目前看起來並不值得，因爲即使他們有自己的問題。

我知道你想要純粹的CSS，可能有你自己的Javascript替代選項，但你可以嘗試使用一個簡單的Javascript省略號庫，如github上的Ellipsity，源代碼非常乾淨和小，所以如果你需要做任何其他更改應該很容易。

https://github.com/Xela101/Ellipsity

我真的想要一個純CSS解決方案，這也加快速度，讓一切看起來更漂亮，而不需要外部的依賴。

Answer 4

這個解決方法將需要一個包裝元素，並且如果它正好滿足您的內容框，它會覆蓋文本的最後一個小小的警告，但它在流暢的情況下運行良好，直到獲得更好的CSS屬性（如線夾）得到廣泛實施。

最適合text-align:justified，但沒有必要。

https://codepen.io/freer4/pen/prKLPy

html, body, p { margin: 0; padding: 0; font-family: sans-serif;line-height:22px;} 
 

 
.ellipsis{ 
 
    overflow:hidden; 
 
    margin-bottom:1em; 
 
    position:relative; 
 
} 
 

 
.ellipsis:before { 
 
    content: "\02026"; 
 
    position: absolute; 
 
    bottom: 0; 
 
    right:0; 
 
    width: 3em; 
 
    height:22px; 
 
    margin-left: -3em; 
 
    padding-right: 5px; 
 
    text-align: right; 
 
    background-size: 100% 100%; 
 
    background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white); 
 
    z-index:2; 
 
} 
 
.ellipsis::after{ 
 
    content:""; 
 
    position:relative; 
 
    display:block; 
 
    float:right; 
 
    background:#FFF; 
 
    width:3em; 
 
    height:22px; 
 
    margin-top:-22px; 
 
    z-index:3; 
 
} 
 

 
/*For testing*/ 
 
.ellipsis{ 
 
    max-width:500px; 
 
    text-align:justified; 
 
} 
 
.ellipsis-3{ 
 
    max-height:66px; 
 
} 
 

 
.ellipsis-5{ 
 
    max-height:110px; 
 
}

<div class="ellipsis ellipsis-3"> 
 
    <p>Reacts to content height. That is, you don't need to fix the height of your content containers. We expect no ellipsis here (unless your viewport is narrow)</p> 
 
</div> 
 

 
<div class="ellipsis ellipsis-3"> 
 
    <p>Here we can have a great many lines of text and it works as we expect it to. Here we can have a great many lines of text and it works as we expect it to. Here we can have a great many lines of text and it works as we expect it to. Here we can have a great many lines of text and it works as we expect it to.</p> 
 
</div> 
 

 

 
<div class="ellipsis ellipsis-5"> 
 
    <p>The number of lines shown is easily controlled by setting the max-height of the .ellipsis element. The downsides are the requirement of a wrapping element, and that if the text is precisely as long as your number of lines, you'll get a white area covering the very trailing end of your text. You've been warned. This is just some pushing text to make the element longer. See the ellipsis? Yay.</p> 
 
</div>

Answer 5

var explorer = detectIE(); 
 

 
function detectIE() { 
 
    var ua = window.navigator.userAgent; 
 
    var msie = ua.indexOf('MSIE '); 
 
    if (msie > 0) { 
 
    // IE 10 or older => return version number 
 
    return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10); 
 
    } 
 
    var trident = ua.indexOf('Trident/'); 
 
    if (trident > 0) { 
 
    // IE 11 => return version number 
 
    var rv = ua.indexOf('rv:'); 
 
    return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10); 
 
    } 
 
    var edge = ua.indexOf('Edge/'); 
 
    if (edge > 0) { 
 
    // Edge (IE 12+) => return version number 
 
    return parseInt(ua.substring(edge + 5, ua.indexOf('.', edge)), 10); 
 
    } 
 
    // other browser 
 
    return false; 
 
} 
 
var firefox = navigator.userAgent.indexOf('Firefox') > -1; 
 

 
if ((explorer) || (firefox)) { 
 

 
    var fontSize = $(.ellipsis - 2).css('font-size'); 
 
    var fontSize = parseInt(fontSize, 10); 
 
    var lineHeight = fontSize + 4; 
 
    var height = lineHeight * 2; 
 
    $(.ellipsis - 2).css("line-height", lineHeight + "px"); 
 
    $(.ellipsis - 2).css("height", height); 
 
    $(.ellipsis - 2).css({ 
 
    "overflow": "hidden", 
 
    "position": "relative", 
 
    "word-break": "break-all" 
 
    }); 
 

 
    var divheight = $(.ellipsis - 2).height(); 
 
    var lineheight = $(.ellipsis - 2).css('line-height').replace("px", ""); 
 
    var countline = Math.round(divheight/parseInt(lineheight)); 
 
    // if you want to show 2 line 
 
    if (countline > 2) { 
 
    $(.ellipsis - 2).addClass("dotted"); 
 
    }; 
 

 
}

.ellipsis-2 { 
 
    -webkit-hyphens: auto; 
 
    -moz-hyphens: auto; 
 
    -ms-hyphens: auto; 
 
    hyphens: auto; 
 
    position: relative; 
 
} 
 

 
.dotted:after { 
 
    content: "..."; 
 
    position: absolute; 
 
    bottom: 0; 
 
    right: 0; 
 
    background: #fff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p class="ellipsis-2">Reacts to content height. That is, you don't need to fix the height of your content containers. We expect no ellipsis here (unless your viewport is narrow)</p>