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>
相关推荐
naildingding4 分钟前
3-ts接口 Interface
前端·typescript
小小前端仔LC11 分钟前
Node.js + LangChain + React:搭建个人知识库(六)- “吃什么”项目实战:从700+菜谱入库到Taro H5端JSON渲染
前端·后端
晓131327 分钟前
【Cocos Creator 3.x】篇——第二章 入门
前端·javascript·游戏引擎
程序员黑豆36 分钟前
AI全栈开发之Java:怎么配置Java环境变量
前端·后端·ai编程
xiaofeichaichai1 小时前
React Hooks
前端·javascript·react.js
问心无愧05131 小时前
ctf show web入门110
前端·笔记
拉拉肥_King1 小时前
Vue 3 主题切换深度解析:从炫酷动画到零闪烁方案
前端·vue.js
excel1 小时前
为什么 Pinia + localForage 持久化后,页面初始化拿不到数据?
前端
雨雨雨雨雨别下啦1 小时前
vant介绍
前端
小小小小宇1 小时前
大模型失忆问题探讨
前端