html - 如何将动态文本插入到具有绝对位置的 div 中？

Question

对于大多数设计来说，这不是一个可行的解决方案，因为我们通常不知道元素中有多少文本，或者将使用的确切字体大小。

我需要使用什么解决方法才能将动态文本插入到具有绝对位置的 div 中？

欢迎任何方法

问候，

score 2 · Accepted Answer

如果您的主要目标是将 div 保持在原位，而不根据文本量更改它的高度或宽度，我会选择：

div {
    overflow: scroll;
}

另一种选择是缩小文本大小以适应 div，但这涉及一定数量的模糊数学，并且您冒着文本太小以至于毫无意义的风险。

如果你想让 div 根据文本改变它的高度，这也涉及到一些模糊数学，但基本上，你会得到文本的长度：

var sometext = "Hey, I'm some text!";
var textlength = sometext.length();

并根据该长度改变高度。你想玩数字，但它看起来像：

var div_height = 10 * textlength;
$("div").css("height,"+ div_height +"em");

score 1 · Accepted Answer

1

在此处查看 W3C 网站的视觉效果部分

于 2009-09-12T14:24:13.470 回答

score 0 · Accepted Answer

0

也许对动态文本容器 div 使用“溢出：自动”。所以高度不是问题。

于 2009-09-12T04:52:48.600 回答

score 0 · Accepted Answer

问题不在于将动态文本放在绝对定位的 div 中 - div 将扩展以适应其中的任何文本。在您的示例中，红色和绿色 div 上没有定义高度。

绝对定位的 div 会从文档流中取出，因此 html 中出现在它们之后的任何内容都会表现得好像它们甚至都不存在一样。

使用绝对定位的 div 的设计需要在包含的 div 上定义一个高度，这样绝对定位的 div 不会与其他内容重叠。在您的示例<div id="div-1">中，定义了 250px 的高度。将其更改为 100px，您将看到<div id="div-after">在红色和绿色 div 下移动。

因此，如果您在侧边栏中有一个绝对定位的 div，之后没有任何内容，您可以添加所有您想要的动态文本。如果您的标题中有一个，它将使您的设计实现起来非常复杂。

4 回答 4