Question

我在页面上有2个div，而第一个div仅包含文本内容。

当前，当第一个div的内容溢出时，由于第一个div的CSS为：

.one {
  overflow: hidden
  width: 100%;
  white-space: nowrap;
}

但是在发生溢出时，我可以使溢出文本出现在第二个div中吗？

例如，假设第一个div中的文本内容是“ Hello there”，它显示“ Hello”，但由于隐藏了溢出而将“ there”切断了，我可以使“ there”出现在第二个div中吗？

我确定这不是开箱即用的行为，但我想知道是否有可能，或者是否有人知道有一个lib可以这样做。谢谢。

Answer 1

CSS的本机功能不允许这种行为，因为它非常特殊。

如果要操纵文本以便使其显示在DOM的不同部分中（取决于确定的标准），则必须使用Javascript来实现。

使用Javascript创建一种解析器，用于检测文本是否符合分隔它们所需的条件，如果符合，则对内容进行处理，以使其显示在正确的元素中。

编辑：

但是，如果您要执行的操作基本上与第一行的格式不同，那么您可能需要的是::fist-line pseudoselector。

通过这种方式，您可以将第一行设置为确定的大小，颜色等。请注意，只有a certain amount of properties可以应用于此选择器。

Answer 2

今晚我遇到了这个确切的问题。我有2个div并排，如果需要，我希望第一个div的文本溢出到第二个div中。我用z-index解决了这个问题，使溢出文本的div具有比要溢出的相邻div高的z-index。