html和css实现文本打断换行、自动换行

html和css实现文本打断换行

英文单词强制打断换行

html 复制代码
<style>
word-wrap: break-word;
word-break: break-all;
</style>

内容自动换行

html 复制代码
<style>


// 连续的空白符会被合并。源码中的换行符会被当作空白符来处理。并根据填充行框盒子的需要来换行。
white-space: pre-wrap;

// 连续的空白符会被合并。源码中的换行符会被当作空白符来处理。并根据填充行框盒子的需要来换行。
white-space: normal;

// 和 normal 一样合并空白符,但阻止源码中的文本换行。
white-space: nowrap;

// 连续的空白符会被保留。仅在遇到换行符或 <br> 元素时才会换行。
white-space: pre;

// 连续的空白符会被保留。在遇到换行符或 <br> 元素时,或者根据填充行框盒子的需要换行。
white-space: pre-wrap;

// 连续的空白符会被合并。在遇到换行符或 <br> 元素时,或者根据填充行框盒子的需要换行。
white-space: pre-line;

// 与 pre-wrap 的行为相同,除了:
// 任何保留的空白序列总是占用空间,包括行末的。
// 每个保留的空白字符后(包括空白字符之间)都可以被截断。
// 这样保留的空间占用空间而不会挂起,从而影响盒子的固有尺寸(min-content 尺寸和 max-content 尺寸)。
white-space: break-spaces;

</style>
相关推荐
Lvan的前端笔记2 小时前
docker:每个前端项目一个 Nginx 容器还是只有一个Nginx容器
前端·nginx·docker
三天不学习3 小时前
Egg.js 4 突然爆火,原因是否归结于AI 原生落地需求爆发?
前端·javascript·全栈·egg.js
xcs194053 小时前
前端 vue 的前端页面debugger 进不去
前端·javascript·vue.js
明月_清风4 小时前
Deno 终局来了:从挑战 Node 到被 Cloudflare 收编
前端·后端·node.js
Csvn5 小时前
框架性能优化
前端
回眸&啤酒鸭7 小时前
【回眸】OpenSwarm 多智能体协作系统实战指南
大数据·前端·人工智能
用户69371750013847 小时前
2026,程序员的时代拐点到了
android·前端·后端
大龄秃头程序员7 小时前
一次 iBeacon + BLE 无感解锁方案的实现记录
前端
小兔子7 小时前
Python 的 GIL 与 free-threading:3.13 之后「去 GIL」走到哪一步了
前端
IT_陈寒7 小时前
SpringBoot自动配置差点让我加班到凌晨
前端·人工智能·后端