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

news2024/9/22 9:35:52

今天在做一个定位元素的时候遇到一个嵌套定位之后,使用绝对定位的元素的内容自动换行的问题,希望不换行只在一行显示。
可以通过添加 white-space: nowrap; 样式控制不换行

<div class="box">
    <div class="box1">
        <div class="box2">
            <div class="div"></div>
            <div class="content">今天天气真不多,适合野外活动</div>
        </div>
    </div>
</div>
        .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样式控制换行问题
        }

在这里插入图片描述
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2101690.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

深入剖析:中国国际大学生创新大赛中不可忽视的12个扣分点

深入剖析&#xff1a;中国国际大学生创新大赛中不可忽视的12个扣分点 前言1. 项目名称&#xff1a;第一印象的力量2. 项目逻辑&#xff1a;清晰的思路是关键3. 问题分析&#xff1a;深入挖掘痛点4. 需求分析&#xff1a;解决方案的导向5. 科研课题与评审维度的匹配6. 团队介绍&…

DataWhale AI夏令营-《李宏毅深度学习教程》笔记-task3

DataWhale AI夏令营-《李宏毅深度学习教程》笔记-task2 第五章 循环神经网络5.1 独热编码5.2 RNN架构5.3 其他RNN5.3.1 Elman 网络 &Jordan 网络5.3.2 双向循环神经网络 第五章 循环神经网络 循环神经网络RNN&#xff0c;RNN在处理序列数据和时间依赖性强的问题上具有独特…

渗透测试靶机--- DC系列 DC-6

渗透测试靶机— DC系列 DC-6 开启靶机&#xff0c;登录页面&#xff0c;平平无奇 扫描ip&#xff0c;端口&#xff0c;服务等信息 访问80&#xff0c;发现这里是WordPress站点 直接wpscan扫描一下用户名wpscan --url http://wordy -e u 这里可以将扫出来的五个用户名保存&…

WPF性能优化之UI虚拟化

文章目录 前言一、VirtualizingStackPanel1.1 虚拟化功能介绍1、在Window中添加一个ListBox控件。2、在设计视图中用鼠标选中ListBox控件并右健依次单击“编辑其他模板”&#xff0d;“编辑项的布局模板”&#xff0d;“编辑副本”。3、查看生成的模板代码。 1.2 虚拟化参数介绍…

如何提升网站权重?

提升网站权重的方法有很多&#xff0c;常规的方法包括内容优化、关键词研究、页面结构调整、提高用户体验等。但这些方法往往需要时间来见效。如果你希望在短时间内看到显著的提升&#xff0c;发外链是一个非常有效的策略。 外链是提升网站权重的有效方法&#xff0c;但需要注…

9月3c++

封装栈和队列 队列 #include <iostream> #include <cstring> using namespace std; class Myqueue { private:int data[256];int size0; public:Myqueue(){}//无参构造~Myqueue(){}//析构//拷贝赋值Myqueue & operator(const Myqueue &other){if(this!&a…

C++ ─── List的模拟实现

一&#xff0c; List的模拟实现 List 是一个双向循环链表,由于List的节点不连续&#xff0c;不能用节点指针直接作为迭代器&#xff0c;因此我们要对结点指针封装&#xff0c;来实现迭代器的作用。 迭代器有两种实现方式&#xff0c;具体应根据容器底层数据结构实现&#xff1…

15、VSCode自定义Markwown编辑环境

前言 &#xff1a;Visual Studio Code (VSCode) 是微软推出的一款开源编辑器&#xff0c;使用 Electron 打造&#xff0c;与 Atom 齐名&#xff0c;不过随着 Atom 社区的渐渐缩小&#xff0c;VSCode 的影响力开始越来越大了。VSCode 内置了 Markdown 语言及预览的支持&#xff…

每周12600元奖金池,邀你与昇腾算力共舞,openMind开发者盛宴启幕!

小伙伴们&#xff0c;是否瞬间被这个标题唤醒了在OpenI启智社区“我为开源打榜狂”黄金时代的温馨记忆&#xff1f;打榜活动虽已谢幕&#xff0c;但大家相伴度过12期的那份激情与创新的共鸣&#xff0c;促使OpenI启智社区在国产算力崛起的浪潮中勇立潮头&#xff0c;推出了“芯…

JavaScript是什么

前言 初始JavaScript JavaScript是什么 JavaScript (简称 JS) 是世界上最流行的编程语言之一 是一个脚本语言, 通过解释器运行 主要在客户端(浏览器)上运行, 现在也可以基于 node.js 在服务器端运行. JavaScript 最初只是为了完成简单的表单验证(验证数据合法性), 结果后…

git 回滚的三种方式

按照从旧到新的顺序 你依次提交了 1 2 3 4 5 现在你想回到1 如何操作 第一种方法 hard reset git reset --hard 执行命令后 你会发现 效果实现了 东西都回到了那次更改 但是2345的更改都没了 并且你会发现 你有更新 这是因为这个hard reset 只会改本地的 远程的不改 一更新就…

7.Lab Six —— Cow Fork

首先切换分支到cow git checkout cow make clean Implement copy-on write 实现写时复制&#xff0c;为了测试方案&#xff0c;以及提供了一个cowtest的xv6程序&#xff0c;位于user/cowtest.c当中 课程给了一个合理的攻克计划&#xff1a; 修改uvmcopy()将父进程的物理页映…

GO 下载依赖改成国内代理

改成我们国内可用的代理地址 在命令提示符输入&#xff1a; 1 go env -w GOPROXYhttps://goproxy.cn 然后再做各种操作就可以成功了 另外一个问题&#xff1a; 手动下载某些依赖包&#xff0c;但是goland一直无法识别。 删掉了GOPATH多余的路径。 另外&#xff0c;启用了…

STL—vector容器

目录 1、简单使用&#xff08;插入数据三种遍历方式&#xff09; 2、介绍 3、常用构造方法 3、扩容reserve和缩容shrink_to_fit 4、insert函数&#xff1a;在某个位置进行插入数据 5、vector使用库里面的find 6、vector< vector > 7、看源代码的技巧 1、简单使用&…

大二必做项目贪吃蛇超详解之下篇游戏核心逻辑实现

贪吃蛇系列文章 上篇win32库介绍中篇设计与分析下篇游戏主逻辑 可以在Gitee上获取贪吃蛇代码。 文章目录 贪吃蛇系列文章5. 核心逻辑实现分析5. 3 GameRun5. 3. 1 PrintScore5. 3. 2 CheckVK5. 3. 3 BuyNewNode5. 3. 4 NextIsFood5. 3. 4 EatFood5. 3. 5 NotFood5. 3. 6 Chec…

【OpenLayers 进阶】添加滤镜改变底图样式

目录 一、前言二、准备工作三、实现方式四、总结 一、前言 项目实施过程中&#xff0c;需要根据不同的业务场景需求变换地图样式。如果客户提供的底图服务或自建底图服务是类似Mapbox这种矢量切片&#xff0c;那只要按照需求配置不同的样式文件即可。如果没有矢量切片&#xff…

浅谈人工智能之Windows:基于ollama进行本地化大模型部署

浅谈人工智能之Windows&#xff1a;基于ollama进行本地化大模型部署 引言 随着人工智能技术的飞速发展&#xff0c;大型语言模型&#xff08;LLMs&#xff09;已经成为推动自然语言处理领域进步的关键力量。然而&#xff0c;传统的云部署方式可能带来数据隐私、成本以及访问速…

pikachu文件包含漏洞靶场通关攻略

本地文件包含 先上传一个jpg文件&#xff0c;内容写上<?php phpinfo();?> 上传成功并且知晓了文件的路径 返回本地上传&#xff0c;并../返回上级目录 可以看到我们的php语句已经生效 远程文件包含 在云服务器上创建一个php文件 然后打开pikachu的远程文件包含靶场&…

鸿蒙开发培训多少钱?

随着物联网技术的发展&#xff0c;HarmonyOS(鸿蒙系统)作为华为推出的一款面向全场景的分布式操作系统&#xff0c;正在逐步成为开发者们关注的焦点。对于那些想要进入这个新兴领域的开发者来说&#xff0c;参加鸿蒙开发培训是一个不错的选择。那么&#xff0c;这样的培训究竟需…

【Hadoop|HDFS篇】HDFS概述

1. HDFS产出背景及定义 1.1 HDFS产生背景 随着数据量越来越大&#xff0c;在一个操作系统存不下所有的数据&#xff0c;那么就分配到更多的操作系 统管理的磁盘中&#xff0c;但是不方便管理和维护&#xff0c;迫切需要一种系统来管理多台机器上的文件&#xff0c;这 就是分布…