绝对定位div宽度如何自适应内容。

Question

.parent {
            width: 500px;
            height: 500px;
            background: red;
            margin: 150px auto;
            position: relative;
        }
        .child {
            left: 300px;
            top: 200px;
            background: yellow;
            position: absolute; 
            width: auto;
            font-size: 16px;
            line-height: 16px;
            max-width: 500px;
        }

<div class="parent">
        <div class="child">
            地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图
        </div>
    </div>

child并没有跟着内容自适应，而是自动换行了。

希望结果是

想问下这个如何实现。

Answer 1

在.child新增css属性white-space: nowrap;

.child {
    left: 300px;
    top: 200px;
    background: yellow;
    position: absolute;
    width: auto;
    font-size: 16px;
    line-height: 16px;
    max-width: 500px;
    white-space: nowrap;
}

Answer 2

因为规范的原因默认就这么显示了，解决办法的话你这里给的不够详细，需要具体的场景，外层代码，业务需求都要知道。才能给出我的方案。
解释下不能自适应式的原因：绝对定位不可替换元素的宽度计算中，如果width,right为auto，left不为auto
那么宽度=min(max(首选最小宽度, 可用宽度), 首选宽度)。

3个宽度说明：

1. 首选宽度：按照不自动断行的方式排版，取得的内容宽度（可以理解为不受容器限制自动排列的宽度就是你想要的效果）

2. 首选最小宽度：calculate the preferred minimum width, e.g.,by trying all possible line breaks（我理解就是在1的情况下你把容器不断缩小到不能换行，一般是单个文字的宽度）

3. 可用宽度：就是把right设置为0，计算出的width

Answer 3

max-width:500px;改成width:500px;

Answer 4

考虑css3属性吗？
父级添加display:flex;justify-content：center；align-items：center。

Answer 5

定宽，或者改成right:-300px;

Answer 6

position值为absolute时，子元素宽度默认自适应父元素，不会越界，要实现你的想法要定宽，不能auto
position值为relative时，子元素宽度默认和父元素宽度一致，即500px，调整定位值即可

Answer 7

我遇到了相同的问题，我在parent和child之间加了一个固定宽度（子元素的最大宽度）的div,这样一来子元素就能根据这个宽度自适应了，因为中间的div宽度可能导致对齐问题需要单独处理

.parent {
        width: 500px;
        height: 500px;
        background: red;
        margin: 150px auto;
        position: relative;
    }
    .childContainer {
        width: 500px;  // 与子元素最大宽度相同
        text-align: right;  // 子元素对齐方向
    }
    .child {
        display: inline-block;  //子元素布局方式变为行内
        left: 300px;
        top: 200px;
        background: yellow;
        position: absolute; 
        width: auto;
        font-size: 16px;
        line-height: 16px;
        max-width: 500px;
    }

<div class="parent">
    <div class="childContainer">
        <div class="child">
            地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图地图
        </div>
    </div>
</div>

Answer 8

.child {
      width: fit-content;
      white-space: nowrap;
}