当前位置： 首页 > news >正文

纯 CSS 实现文字换行环绕效果

news 2026/3/31 8:44:49

实现效果

在这里插入图片描述

实现代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>p {margin: 0;padding: 0;}.text-wrap {float: right;width: 15px;height: 15px;shape-outside: content-box;background-color: rebeccapurple;border: 2px solid black;border-radius: 2px;margin-top: 20px;padding-left: 5px;/* padding: 20px; */}.ellipsis {display: -webkit-box;-webkit-line-clamp: 2; /* 显示的行数 */-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;line-height: 20px;}.box {width: 400px;}</style></head><body><div class="box ellipsis"><div class="text-wrap"></div><p>这是要环绕的文本内容。这是要环绕的文本内容。这是要环绕的文本内容。这是要环绕的文本内容。这是要环绕的文本内容。这是要环绕的文本内容。这是要环绕的文本内容。</p></div></body>
</html>

实现思路

shape-outside

shape-outside 的 CSS 属性定义了一个可以是非矩形的形状，相邻的内联内容应围绕该形状进行包装。默认情况下，内联内容包围其边距框; shape-outside 提供了一种自定义此包装的方法，可以将文本包装在复杂对象周围而不是简单的框中。

值：content-box

定义一个由内容区域的外边缘封闭形成的形状（译者：表述的不太好，就是被 padding 包裹的区域，在 chrome 控制台中的盒子模型图中的蓝色区域。）。每一个角的弧度取 0 或 border-radius - border-width - padding 中的较大值。
其它的值：circle、ellipse、inset、polygon、url、auto 这次用不到。

相关文章：

纯 CSS 实现文字换行环绕效果

实现效果 实现代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><title>Document</title><…...

编程日记 2024/3/18 13:31:31

【爬虫逆向】Python逆向采集猫眼电影票房数据

进行数据抓包&#xff0c;因为这个网站有数据加密 !pip install jsonpathCollecting jsonpathDownloading jsonpath-0.82.2.tar.gz (10 kB)Preparing metadata (setup.py) ... done Building wheels for collected packages: jsonpathBuilding wheel for jsonpath (setup.py) .…...

编程日记 2024/3/18 13:26:25

解析服务器下载速度：上行、下行与带宽之谜

在日常使用中&#xff0c;我们经常会遇到从服务器下载内容速度忽快忽慢的情况&#xff0c;即便服务器的硬件配置如4核CPU、8GB内存和12Mbps的带宽看似足够。为何会出现这种现象&#xff1f;这背后涉及到网络中的上行、下行以及带宽等关键概念。本文旨在揭开这些术语背后的含义&…...

编程日记 2024/3/18 13:24:22

计算机网络的概念

目录 <计算机网络的定义> <计算机网络的形成与发展> 1.第一阶段远程联机阶段----60年代以前: 2.第二阶段多机互联网络阶段----60年代中期: 3.第三阶段标准化网络阶段----70年代末: 4.第四阶段网络互联与高速网络阶段一90年代: <计算机网络的未来--下一代…...

编程日记 2024/3/18 13:23:19

MATLAB中的脚本和函数有什么区别？

MATLAB中的脚本和函数是两种不同的代码组织方式&#xff0c;它们在结构、功能和使用方式上有显著的区别。以下是对这两种方式的详细解释&#xff0c;总计约2000字。 一、MATLAB脚本 MATLAB脚本是一种包含多条MATLAB命令的文件&#xff0c;这些命令按照在文件中的顺序依次执行…...

编程日记 2024/3/18 13:20:16

从电影《沙丘》说起——对人工智能的思考

正文 从《沙丘》开始说起 之前看《沙丘》电影&#xff0c;里面有一类角色叫门泰特&#xff0c;这类人大脑可以飞快地运算&#xff0c;在电影设定里是替换人工智能、机器运算的存在。男主保罗也是这类型的人&#xff0c;但他可能基因更强大&#xff0c;吸食了香料后&#xff0…...

编程日记 2024/3/18 13:18:14

使用Python进行自然语言处理（NLP）：NLTK与Spacy的比较【第133篇—NLTK与Spacy】

&#x1f47d;发现宝藏 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。【点击进入巨牛的人工智能学习网站】。 使用Python进行自然语言处理&#xff08;NLP&#xff09;&#xff1a;NLTK与Spacy的比较 自…...

编程日记 2024/3/18 13:16:12

学习笔记--在线强化学习与离线强化学习的异同（3）

这篇博文很多部分仅代表个人学习观点&#xff0c;欢迎大家与我一起讨论 强化学习与离线强化学习的区别 强化学习和离线强化学习都是机器学习的分支&#xff0c;主要用于训练智能体以在不断尝试和错误的过程中学习如何最大化累积奖励。它们之间的主要区别在于数据的获取方式和训…...

编程日记 2024/3/18 13:14:11

使用Thymeleaf导出PDF，页眉插入图片与内容重叠？

CSS 打印分页功能 需求&#xff1a;打印 在第一页的内容被挤到第二页的时候&#xff0c;又想每一页页头都有相同的样式&#xff0c;使用页眉。 问题&#xff1a;第二页的内容与页眉重叠了&#xff1f; 查各路找出的原因&#xff1a;header 页眉不占空间 解决&#xff1a;不…...

编程日记 2024/3/18 13:13:10

python网络编程：通过socket实现TCP客户端和服务端

目录 写在开头 socket服务端&#xff08;基础&#xff09; socket客户端&#xff08;基础&#xff09; 服务端实现&#xff08;可连接多个客户端&#xff09; 客户端实现 数据收发效果 写在开头 近期可能会用python实现一些网络安全工具&#xff0c;涉及到许多关于网络…...

编程日记 2024/3/18 13:11:08

论文阅读——RSGPT

RSGPT: A Remote Sensing Vision Language Model and Benchmark 贡献&#xff1a;构建了一个高质量的遥感图像描述数据集&#xff08;RSICap&#xff09;和一个名为RSIEval的基准评估数据集&#xff0c;并在新创建的RSICap数据集上开发了基于微调InstructBLIP的遥感生成预训练…...

编程日记 2024/3/18 13:07:04

长连接技术

个人学习记录&#xff0c;欢迎指正 1.轮询 1.1 轮询的形式 短连接轮询 前端每隔一段时间向服务端发起一次Http请求来获取数据。 const shortPolling () > { const intervalHandler setInterval(() > {fetch(/xxx/yyy).then(response > response.json()).then(respo…...

编程日记 2024/3/18 13:06:04

供电系统分类详解

一、供电系统分类 电力供电系统一般有5种供电模式&#xff0c;常用的有&#xff1a;IT系统&#xff0c;TT系统&#xff0c;TN系统&#xff0c;其中TN系统又可以分为TN-C&#xff0c;TN-S&#xff0c;TN-C-S。 1、TN-C系统&#xff08;三相四线制&#xff09; 优点: 该系统中…...

编程日记 2024/3/18 13:05:02

基于centos7的k8s最新版v1.29.2安装教程

k8s概述 Kubernetes 是一个可移植、可扩展的开源平台&#xff0c;用于管理容器化的工作负载和服务&#xff0c;可促进声明式配置和自动化。 Kubernetes 拥有一个庞大且快速增长的生态&#xff0c;其服务、支持和工具的使用范围相当广泛。 Kubernetes 这个名字源于希腊语&…...

编程日记 2024/3/18 12:59:57

【赠书第20期】AI绘画与修图实战：Photoshop+Firefly从入门到精通

文章目录 前言 1 入门篇&#xff1a;初识Photoshop与Firefly 2 进阶篇&#xff1a;掌握Photoshop与Firefly的核心技巧 3 实战篇&#xff1a;运用Photoshop与Firefly进行创作 4 精通篇&#xff1a;提升创作水平&#xff0c;拓展应用领域 5 结语 6 推荐图书 7 粉丝福利 前…...

编程日记 2024/3/18 12:57:55

如何在并行超算云上玩转PWmat③：使用Q-Flow提交计算的案例演示

3月的每周二下午14:00我们将会在并行直播间为大家持续带来线上讲座。前面两期我们分享了”PWmat特色功能和应用“以及“如何在并行超算云平台使用PWmat计算软件”主题讲座&#xff0c;回看视频和PPT已上传至B站”龙讯旷腾“账号内。 本周张持讲师将继续带着大家手把手上机教学…...

编程日记 2024/3/18 12:56:54

html5cssjs代码 017样式示例

html5&css&js代码 017样式示例 一、代码二、解释 这段HTML代码定义了一个网页的基本结构&#xff0c;包括头部、主体和尾部。在头部中&#xff0c;设置了网页标题、字符编码和样式。主体部分包含一个标题和一个表格&#xff0c;表格内分为两个单元格&#xff0c;左侧为…...

编程日记 2024/3/18 12:55:52

Vue.js动画

Vue.js动画 Vue.js动画是指在Vue组件中通过添加/移除CSS类或应用CSS过渡/动画效果来实现的视觉效果。这些动画可以帮助改善用户体验&#xff0c;使界面更加生动和吸引人。 Vue.js提供了两种类型的动画&#xff1a;过渡和动画。 过渡&#xff1a;过渡是在元素插入、更新或删除…...

编程日记 2024/3/18 12:54:51

信号与系统学习笔记——信号的分类

目录 一、确定与随机 二、连续与离散 三、周期与非周期 判断是否为周期函数 离散信号的周期 结论 四、能量与功率 定义 结论 五、因果与反因果 六、阶跃函数 定义 性质 七、冲激函数 定义 重要关系 作用 一、确定与随机 确定信号&#xff1a;可以确定时间函数…...

编程日记 2024/3/18 12:53:50

PyTorch深度学习实战（39）——小样本学习

PyTorch深度学习实战&#xff08;39&#xff09;——小样本学习 0. 前言1. 小样本学习简介2. 孪生网络2.1 模型分析2.2 数据集分析2.3 构建孪生网络 3. 原型网络3. 关系网络小结系列链接 0. 前言 小样本学习 (Few-shot Learning) 旨在解决在训练集中只有很少样本的情况下进行分…...

编程日记 2024/3/18 12:50:48

Wan2.2-I2V-A14B部署教程：解决OOM/驱动报错/端口冲突三大常见问题

Wan2.2-I2V-A14B部署教程&#xff1a;解决OOM/驱动报错/端口冲突三大常见问题 1. 镜像概述与核心优势 Wan2.2-I2V-A14B是一款专为文生视频任务优化的私有部署镜像&#xff0c;特别针对RTX 4090D 24GB显存配置进行了深度优化。这个镜像最大的特点是解决了AI视频生成领域常见的…...

编程新知 2026/3/31 8:35:43

京东开放平台应用申请实战：从零到一，避开那些“看不见”的坑

1. 为什么你需要这份京东开放平台避坑指南&#xff1f; 第一次申请京东开放平台应用时&#xff0c;我踩遍了所有能踩的坑。记得当时为了赶项目进度&#xff0c;直接跳过了官方文档的"不重要章节"&#xff0c;结果在云鼎环境配置环节卡了整整三天。后来才发现&#xf…...

编程新知 2026/3/31 8:35:43

Qwen3.5-9B惊艳案例：上传X光片→识别骨折位置→标注解剖结构→生成诊断报告草稿

Qwen3.5-9B惊艳案例&#xff1a;上传X光片→识别骨折位置→标注解剖结构→生成诊断报告草稿 1. 医疗影像分析的革命性突破 想象一下这样的场景&#xff1a;一位急诊医生面对堆积如山的X光片&#xff0c;需要在短时间内做出准确诊断。传统方法需要医生逐张查看、标注异常部位、…...

编程新知 2026/3/31 8:05:28

【Linux】深入理解进程调度：从nice值到实时优先级（RT Priority）的进阶指南

1. Linux进程调度基础&#xff1a;从nice值说起 第一次接触Linux进程调度时&#xff0c;我被那个叫"nice值"的概念搞懵了。为什么用"nice"这个词&#xff1f;后来才明白&#xff0c;这个命名其实很形象——越"nice"的进程越谦让&#xff0c;愿意…...

编程新知 2026/3/31 6:00:31

Graphormer实战：预测药物溶解度与渗透性，助力ADMET性质评估

Graphormer实战&#xff1a;预测药物溶解度与渗透性&#xff0c;助力ADMET性质评估 1. 药物研发中的ADMET挑战 在药物研发领域&#xff0c;ADMET&#xff08;吸收、分布、代谢、排泄和毒性&#xff09;性质评估是决定候选药物成败的关键环节。传统实验方法耗时耗力&#xff0…...

编程新知 2026/3/31 5:58:31

CMake实战：用ExternalProject_Add一键集成第三方库（附spdlog完整配置）

CMake实战&#xff1a;用ExternalProject_Add一键集成第三方库&#xff08;附spdlog完整配置&#xff09; 在C项目开发中&#xff0c;第三方库的集成往往是最耗时的环节之一。传统的手动下载、编译、配置头文件路径和链接库文件的方式&#xff0c;不仅效率低下&#xff0c;还会…...

编程新知 2026/3/31 5:36:20

OpenAI最新研究：为什么过程监督比结果监督更有效？手把手解析PRM800K数据集

OpenAI过程监督革命&#xff1a;PRM800K数据集如何重塑大模型对齐范式 数学解题过程中&#xff0c;大语言模型常常会犯下令人啼笑皆非的逻辑错误——得出正确答案却使用了完全错误的推理路径。这种现象在GPT-4等顶尖模型中依然存在&#xff0c;就像学生在考试中"蒙对"…...

编程新知 2026/3/31 5:26:13

Pixel Couplet Gen效果展示：乙巳马年像素春联生成惊艳作品集

Pixel Couplet Gen效果展示&#xff1a;乙巳马年像素春联生成惊艳作品集 1. 项目概览 这是一款基于ModelScope大模型驱动的春联生成器。我们创新性地采用夸张的像素游戏风格(Retro Game UI)&#xff0c;将传统元素与红白机美学融合&#xff0c;为用户生成独一无二的马年像素春…...

编程新知 2026/3/31 4:43:50

CAN总线数字信号特性与工程应用解析

1. CAN总线信号本质解析CAN总线采用数字信号传输机制&#xff0c;这是由其底层电气特性和协议设计决定的。在物理层上&#xff0c;CAN总线使用差分电压信号&#xff08;CAN_H和CAN_L&#xff09;表示逻辑状态&#xff1a;当CAN_H电压高于CAN_L约1.5V时表示显性位&#xff08;逻…...

编程新知 2026/3/31 4:33:15

【限时开源】FastAPI 2.0 AI流式SDK v1.0：内置token计数、流控限速、断点续传、前端SSE自动重连——仅开放首批200个GitHub Star领取资格

第一章&#xff1a;FastAPI 2.0 异步 AI 流式响应的核心演进与架构定位FastAPI 2.0 将原生异步流式响应能力从实验性支持升级为一级公民&#xff0c;彻底重构了 AI 应用服务端的实时交互范式。其核心演进体现在对 StreamingResponse 的深度重写、对 ASGI 3.0 协议的精准适配&am…...

编程新知 2026/3/31 4:09:03