如何獲得CSS屬性「text-overflow：ellipses」的反向行爲？

我嘗試下面的代碼：如何獲得CSS屬性「text-overflow：ellipses」的反向行爲？

#my-div{ 
 
    background-color: lightblue; 
 
    display: inline-block; 
 
    width: 200px; 
 
    
 
    text-overflow: ellipsis; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
}

<html> 
 
    <body> 
 
    <div id="my-div">The quick brown fox jumps over the lazy dog</div> 
 
    </body> 
 
</html>

你可能注意到了，在3點替換句子中，因爲溢出的DIV的最後一部分。我怎樣才能扭轉這種行爲？是否有可能用3個點代替句子的第一部分（即隱藏起始部分的溢出而不是結束部分）？

來源

2017-07-19 Ahmed Hussein

你可能會在這裏找到一些建議：1）在左側文本溢出省略號（HTTPS：/ /stackoverflow.com/questions/9793473/text-overflow-ellipsis-on-left-side），2）[從左邊截去的溢出]（https： //stackoverflow.com/questions/12761418/i-need-an-overflow-to-truncate-from-the-left-with-ellipses），和3）[反向省略號]（https://hugogiraudel.com/2014/12/16/css-riddle-reverse-ellipsis /） – showdev

看看[this]（http://hackingui.com/front-end/a-pure-css-solution-for-multiline-text-truncation /） –

只需在CSS中添加text-align: left;和direction: rtl;，它就可以工作。

https://codepen.io/anon/pen/eRwoGZ

CSS

#my-div{ 
    background-color: lightblue; 
    display: inline-block; 
    width: 200px; 
    text-align: left; 
    direction: rtl; 

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

HTML

<html> 
    <body> 
    <div id="my-div">The quick brown fox jumps over the lazy dog</div> 
    </body> 
</html>

來源

2017-07-19 22:53:21

這適用於Firefox 54和Chrome 59，但不適用於Safari 10.1.1。 – showdev

@showdev我在Safari 10.1.1中檢查過，它正在工作。 –

只需從我的codepen導出並在Safari中打開即可。這是工作。 –

如何獲得CSS屬性「text-overflow：ellipses」的反向行爲？

回答

相關問題