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

我有这个解决方案：

<style>

html * {
        margin: 0;
    }     

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

    #a1{
        position: relative;
        margin:10px;
        border:1px solid black;
        overflow:hidden;
    }

    #a1 img{
            max-width:700px;
    }

    #a2{
        position: absolute;
        right:5%;
        bottom:5%;
        border:1px solid white;
        color:#fff;
        font-size:2em;
        background:rgba(0,0,0,0.7);
        padding:10px;
    }
</style>
<div id='a1'>
        <img src="https://lh3.googleusercontent.com/-kx0cklvaX2A/VBgtKrx6FWI/AAAAAAAAAG4/4ZERNAeA5HI/s931-fcrop64=1,06480000ffc9ffff/pZhc7Fq5oX8.jpg" />

     <div id='a2'>
            <div>Your Text is flexible width</div>
            <hr/>
            <div>other text here</div>
        </div>
    </div>

http://jsfiddle.net/2hynguq9/2/

灵活的文字宽度可以调整到div，享受

Answer 5

它实际上适合我。但请尝试将display: inline;添加到div。

Answer 6

我弄清楚我的具体问题是什么，并想到我在这里提到它以帮助其他人调试：

我有两个元素，一个sup和一个span。 sup有负余量。当我做响应断点时，跨度并没有真正集中。我不得不调整断点的负余量。

Answer 7

我通过添加一个包装div来解决此问题，该div也绝对定位，其宽度我希望div扩大到。

例如，

<div class="wrapper">
    <div class="my-div"></div>
</div>

还有CSS，

.wrapper {
    position: absolute;
    width: 500px;
}

.my-div {
    position: absolute;
    whitespace: pre-wrap;
}

您可以添加空格：预包装以允许换行，这比nowrap解决方案更加灵活。

Answer 8

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

Answer 9

尝试在div上使用“width：auto”的css属性：）

宽度未指定的div（绝对定位）

9 个答案: