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

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

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


相关推荐
blackorbird1 小时前
Edge 浏览器 IE 模式成攻击突破口:黑客借仿冒网站诱导攻击
前端·edge
谷歌开发者2 小时前
Web 开发指向标 | Chrome 开发者工具学习资源 (一)
前端·chrome·学习
名字越长技术越强2 小时前
Chrome和IE获取本机ip地址
前端
天***88962 小时前
Chrome 安装失败且提示“无可用的更新” 或 “与服务器的连接意外终止”,Chrome 离线版下载安装教程
前端·chrome
半梦半醒*2 小时前
zabbix安装
linux·运维·前端·网络·zabbix
清羽_ls3 小时前
React Hooks 核心规则&自定义 Hooks
前端·react.js·hooks
你的人类朋友3 小时前
“签名”这个概念是非对称加密独有的吗?
前端·后端·安全
西陵3 小时前
Nx带来极致的前端开发体验——任务缓存
前端·javascript·架构
10年前端老司机4 小时前
Promise 常见面试题(持续更新中)
前端·javascript
潘小安4 小时前
跟着 AI 学 (一)- shell 脚本
前端·ci/cd·vibecoding