Question

我尝试了以下代码：

＆＃13;

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

＆＃13;

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

＆＃13;

正如您所注意到的，由于溢出，3个点替换了div中句子的最后一部分。我该如何扭转这种行为？是否可以用3个点替换句子的第一部分（即从开头隐藏溢出而不是结尾）？

Answer 1

只需在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>

如何获得CSS属性的反向行为＆＃34;文本溢出：省略号＆＃34;？

1 个答案: