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 小时前
第8章利用CSS制作导航菜单
前端·css
guokanglun1 小时前
CSS样式实现3D效果
前端·css·3d
NiNg_1_2345 小时前
前端CSS3 渐变详解
前端·css·html
Au_ust6 小时前
css:权重计算
前端·css
前端Hardy7 小时前
HTML&CSS 打造的酷炫菜单选项卡
前端·javascript·css·html·css3
YUJIANYUE8 小时前
原生html+js输入框下拉多选带关闭模块完整案例
javascript·css·html
码手Lion8 小时前
CSS多列布局:打破传统布局的束缚
前端·css
Wx-bishekaifayuan8 小时前
springboot市社保局社保信息管理与分析系统-计算机设计毕业源码03479
java·css·spring boot·spring·spring cloud·servlet·guava
起风的秋天@8 小时前
CSS Modules在框架中的使用
前端·css
王解13 小时前
【深度解析】CSS工程化全攻略(1)
前端·css