宽度未指定的div(绝对定位)

Question

我有一个绝对定位的div我正在使用,我在其中放入一些文本只是为了能够在页面上找到它,即:

<div style="position:absolute; top:10px; left:500px; font-size:30px; ">Example Text </div>

文本最终包装,即"示例"和"文本"在不同的行上.在我的Firefox浏览器中没有显示滚动条,实际上它的宽度大约为1000px.是否必须在div上设置宽度？他们不扩大内容吗？

如果它有帮助,我在这里包含了此元素的Firebug CSS输出:

element.style {
      font-size: 30px;
      left: 500px;
      position: absolute;
      top: 10px;
}
html * {
    margin: 0;
}              //  main.css (line 1)

Inherited from body:

body {
    color: #333333;
    font: 11px verdana,arial,helvetica,sans-serif;
}

谢谢

Answer 1

尝试添加:

white-space: nowrap;

在你固定的div中.但要注意,当div小于窗口宽度时,此解决方案不会导致换行.

Answer 2

块级元素垂直扩展以保存其内容,但水平扩展以填充其容器.既然你正在使用绝对定位,那么"填充容器"的语义会有所改变.

通常情况下,如果未指定宽度(或宽度为'auto',默认宽度),浏览器将尝试填充浏览器的剩余水平空间,因此您所描述的内容听起来很奇怪.看起来很可能是其他东西干扰了导致该行为的元素(例如,父链中某处的相对或绝对定位的元素).

我会尝试通过查看是否可以使用根级别div(如果您还没有)复制行为来调试此操作,以消除父元素导致问题的可能性.

Answer 3

在绝对定位的元素上,添加:

display: table;

Answer 4

尝试 css 属性“width: fit-content;” 或“宽度：最大内容；” 它允许内容水平扩展。