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点的强制英文单词断行,才可以实现。

相关推荐
落霞的思绪1 小时前
CSS复习
前端·css
前端老鹰14 小时前
CSS backdrop-filter:给元素背景添加模糊与色调的高级滤镜
前端·css·html
艾小码19 小时前
深入解析CSS伪类:从基础到高级实战指南
前端·css
鸢栀w20 小时前
前端css学习笔记7:各种居中布局&空白问题
前端·css·笔记·学习·尚硅谷网课
讨厌吃蛋黄酥1 天前
前端居中九种方式血泪史:面试官最爱问的送命题,我一次性整明白!
前端·css
意会1 天前
微信闪照小程序实现
前端·css·微信小程序
码码哈哈爱分享2 天前
Tauri 框架介绍
css·rust·vue·html
一枚前端小能手2 天前
🎨 CSS布局从入门到放弃?Grid让你重新爱上布局
前端·css
落雪小轩韩2 天前
网格布局 CSS Grid
前端·css
睡不着先生2 天前
`text-wrap: balance` 实战指南:让多行标题自动排版更优美
css