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

相关推荐
Yvonne爱编码5 分钟前
CSS- 4.3 绝对定位(position: absolute)&学校官网导航栏实例
前端·css·html·html5·hbuilder
Yvonne爱编码4 小时前
CSS- 4.4 固定定位(fixed)& 咖啡售卖官网实例
前端·css·html·状态模式·hbuilder
heart000_16 小时前
从零开始打造个人主页:HTML/CSS/JS实战教程
javascript·css·html
Yvonne爱编码15 小时前
CSS- 4.1 浮动(Float)
前端·css·html·github·html5·hbuilder
有事没事实验室16 小时前
CSS 浮动与定位以及定位中z-index的堆叠问题
前端·css·开源
读心悦17 小时前
5000 字总结CSS 中的过渡、动画和变换详解
前端·css·tensorflow
Yvonne爱编码20 小时前
CSS- 4.2 相对定位(position: relative)
前端·css·状态模式·html5·hbuilder
白小白灬20 小时前
Vue主题色切换实现方案(CSS 变量 + 类名切换)
前端·css·vue.js
哎呦你好20 小时前
HTML 颜色全解析:从命名规则到 RGBA/HSL 值,附透明度设置与场景应用指南
前端·css·html
GanGuaGua1 天前
Vue3:脚手架
前端·javascript·css·vue.js·vue