javascript - 隐藏带有溢出的文本 block 的开头 :hidden

Question

我有一个 div 元素，它对于其中的文本来说故意太小了。我希望 overflow hidden ，但我希望 div 内的文本成为文本 block 的“底部”，即要显示的句子结尾和要隐藏的句子开头。

如果我能得到省略号就更好了，例如代替常规省略号切断句子的结尾:

|猫跳过了...|

我希望在 block 的开头有一个省略号，即

|...越过高高的栅栏|

谁能帮帮我？

Answer 1

这是一种方法:

1) 将文本放在带有 position:absolute 和 bottom:0

的包装元素中

2) 由于文本总是大于外部 div 的宽度...如问题所述:

I have a div element which is deliberately too small for the text inside it.

...我们可以在外部元素上使用生成的内容在文本前设置一个省略号

DEMO

div {
  width: 120px;
  height: 18px;
  overflow: hidden;
  position: relative;
  border: 1px solid green;
}
div:before {
  content: '...';
  display: inline-block;
}
span {
  position: absolute;
  bottom: 0;
}

<div><span>the cat jumped over the fence</span>
</div>