如何获得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”的反向行为？

回答

相关问题