绝对定位导致内容自动换行问题解决

新时代农民工Top2024-09-07 15:11

今天在做一个定位元素的时候遇到一个嵌套定位之后，使用绝对定位的元素的内容自动换行的问题，希望不换行只在一行显示。

可以通过添加 white-space: nowrap; 样式控制不换行

html 复制代码

<div class="box">
    <div class="box1">
        <div class="box2">
            <div class="div"></div>
            <div class="content">今天天气真不多，适合野外活动</div>
        </div>
    </div>
</div>

css 复制代码

        .box {
            position: relative;
            width: 500px;
            height: 400px;
            background-color: rgb(235, 235, 235);
        }
        .box1 {
            position: absolute;
            top: 200px;
            left: 100px;
            height: 70px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .box2 {
            position: relative;
        }
        .div {
            width: 70px;
            height: 70px;
            background-color: aqua;
            border-radius: 50%;
        }
        .content {
            position: absolute;
            background-color: antiquewhite;
            white-space: nowrap; // 通过这个css样式控制换行问题
        }