css div块标签内的多个英语单词怎样设置换行

背景:

在<div>标签内,当接口返回的字符串全是英文字母,不会自动换行。

**原因:**查过相关资料后才知道,只有英文文本才会出现不能自动换行的情况,(中文不存在)而原因是因为英文文本之间没有加空格,浏览器会认为这是一个特别长的单词。

解决办法:

word-break: break-all; //强制英文单词断行

话不多说,先看实现效果:

核心代码:

html 复制代码
//css
        word-wrap: break-word;
        word-break: break-all;
        text-align: justify;

效果实现了,下面是一些理论知识:

  1. word-wrap: break-word; //自动换行
  2. white-space:nowrap; //强制不换行
  3. word-break: break-all; //强制英文单词断行

备注:第1点自动换行,可用于中文字符串的div,但是用于英文字符串的div不生效。通过第3点的强制英文单词断行,才可以实现。

相关推荐
用户059540174462 小时前
把AI长期记忆测试从手动验证换成pytest,2天揪出11个隐藏Bug
前端·css
a1117764 小时前
唯美花朵风格的黑胶唱片音乐播放器
前端·css·css3
布兰妮甜9 小时前
CSS 现代布局终极方案:Grid 完整实战,替代浮动/弹性布局复杂场景
css·grid·实战教程·浮动·web布局
JR空位投 李佃贵是13 小时前
如何编写轻量级 CSS 框架
前端·css·tensorflow
寒水馨1 天前
Windows下载、安装 Tailwind CSS-v4.3.3(附安装包tailwindcss-windows-x64.exe)
前端·css·前端开发·tailwind css·utility-first·css 框架·独立 cli
思码梁田1 天前
CSS 定位详解:从相对到固定,掌握网页布局的核心
前端·javascript·css
muddjsv1 天前
CSS 高级选择器精讲:伪类、伪元素、逻辑伪类与选择器解耦规范
前端·css
用户446846004801 天前
C 语言分支与循环语句总结
css
寒水馨2 天前
macOS下载、安装 Tailwind CSS-v4.3.3(附安装包tailwindcss-macos-arm64)
前端·css·macos·tailwind css·utility-first·css 框架·实用优先
朕的剑还未配妥2 天前
CSS 实现渐变毛玻璃:从 backdrop-filter 到多层 mask
前端·css