Question

我有一个div元素，故意对它里面的文字来说太小了。我希望隐藏溢出，但我希望div中的文本是文本块的“底部”，即要显示的句子的结尾和要隐藏的句子的开头。

如果我能得到一个省略，那就更好了，例如INSTEAD的常规挽字切断了句子的结尾：

|猫跳了过来...... |

我希望在块的开始处进行省略，即

| ...高高的栅栏|

有人能帮助我吗？

Answer 1

以这种方式：

1）将文本放在包含position:absolute和bottom:0

的包装元素中

2）因为文本总是大于外部div的宽度......正如问题所说：

我有一个div元素，故意对文本来说太小了在里面。

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

<强> DEMO

＆＃13;

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

＆＃13;

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

＆＃13;

用overflow：hidden隐藏文本块的开头

1 个答案: