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>
相关推荐
慧一居士5 小时前
Element Plus 按需引入的配置使用说明和完整示例
前端·vue.js
程序员黑豆5 小时前
鸿蒙应用开发实战:从零学会自定义组件
前端·华为·harmonyos
leoZ2315 小时前
记忆系统与 Agent 定制完全指南(三):记忆的检索与使用
前端·chrome
遇乐的果园5 小时前
前端学习笔记-vue状态管理优化
前端·笔记·学习
GIS阵地7 小时前
QgsSingleBandPseudoColorRenderer 完整详解(QGIS 3.40.13 C++)
开发语言·前端·c++·qt·qgis
刘较瘦_7 小时前
AI 开发中的 Git Submodule 父子仓库模式:前后端分仓管理与协作实践
前端·github
牧艺7 小时前
cos-design WeatherBackground:用 Canvas 做一个「会变天」的背景引擎
前端·canvas·视觉设计
OpenTiny社区7 小时前
深度解析 LSP 如何为 AI 装上“眼睛”
前端·ai编程
布列瑟农的星空7 小时前
流程类SVG画布的通用开发范式
前端
fsssb7 小时前
Chromium 源码学习笔记(七):那些跨进程的调用,底下都是同一个东西——Mojo
前端