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

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

可以通过添加 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样式控制换行问题
        }


相关推荐
万少14 分钟前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
OpenGL20 分钟前
Android targetSdkVersion升级至35(Android15)相关问题
前端
rzl0235 分钟前
java web5(黑马)
java·开发语言·前端
Amy.Wang37 分钟前
前端如何实现电子签名
前端·javascript·html5
今天又在摸鱼39 分钟前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
蓝婷儿41 分钟前
每天一个前端小知识 Day 21 - 浏览器兼容性与 Polyfill 策略
前端
百锦再44 分钟前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
jingling5551 小时前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架
拾光拾趣录1 小时前
CSS 深入解析:提升网页样式技巧与常见问题解决方案
前端·css
莫空00001 小时前
深入理解JavaScript属性描述符:从数据属性到存取器属性
前端·面试