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>
相关推荐
计算机魔术师2 小时前
Dario Amodei 发文呼吁为前沿 AI 降速并提出三点计划
前端
计算机魔术师2 小时前
OpenAI的AI代理偷偷给RubyGems下毒,我们却毫无察觉
前端
甲维斯2 小时前
0代码,0建模,3句话开发一个3D游戏!
前端·游戏·游戏开发
IT_陈寒2 小时前
Vue的响应式更新把我坑惨了,原来问题出在这
前端·人工智能·后端
tingke2 小时前
别再堆 AGENTS.md 了:前端团队的 Agent 上下文分层落地指南
前端
李明卫杭州3 小时前
React 复合事件系统对比解析
前端·javascript·react.js
葡萄城技术团队3 小时前
SpreadJS V19.2 新特性揭秘:FILTERXML 函数
前端
袋鼠云数栈UED团队4 小时前
AI Coding 方法论分析:同一个需求 SpecKit 、 Superpowers、 MattpocockSkills 不同设计
前端·aigc·ai编程
掰头战士4 小时前
Prompt Cache,如果agent全靠LLM方做隐式缓存实在不够用。
前端·llm·agent
LEE4 小时前
前端转型全栈 01:数据建模,前端最大的盲区
前端·javascript·后端