时间戳

首页 > 解决方案 > 将一个 div 的内容溢出到另一个 div

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

问题描述

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

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

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

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

例如，假设第一个 div 中的文本内容是“Hello there”，它显示“Hello”，但“there”因为溢出隐藏而被截断，我可以让“there”出现在第二个 div 中吗？

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

标签： javascriptjqueryhtmlcss

解决方案

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

如果您想根据确定的标准操作文本以使其显示在 DOM 的不同部分中，则必须使用 Javascript 来执行此操作。

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

编辑：

但是，如果您尝试做的基本上是第一行与文本其余部分的格式不同，那么您可能需要简单的::fist-line 伪选择器。

这样，您可以将第一行设置为具有确定的大小、颜色等。请注意，尽管只能将一定数量的属性应用于此选择器。

推荐阅读