javascript - 将一个 div 的内容溢出到另一个 div

Question

我在一个页面上有 2 个 div，第一个 div 只有文本内容。

目前，当第一个 div 的内容溢出时，它会被 chop ，因为第一个 div 的 CSS 是:

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

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

比如第一个div中的文本内容是“Hello there”，它显示“Hello”但是“there”因为overflow hidden而被 chop 了，我可以让“there”出现在第二个div中吗？

我确定这不是开箱即用的行为，但我想知道它是否可能，或者是否有人知道可以执行此操作的库。谢谢。

Answer 1

CSS 的原生能力不允许这种行为，因为它非常特殊。

如果您想要根据确定的标准操作文本，使其显示在 DOM 的不同部分，您将不得不使用 Javascript 来实现。

使用 Javascript 创建一种解析器，检测文本是否符合分隔它们所需的标准，如果符合，则操纵内容以使其显示在正确的元素中。

编辑:

但是，如果您尝试做的基本上是第一行与文本其余部分的格式不同，您可能需要的很简单 ::fist-line pseudoselector .

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