竟然不会解决文本超出长度换行了

587 阅读2分钟

昨天测试测到一个样式的问题,如下

模型ID这块赋值长度过长超出p标签的宽。

image.png

231635303394_.pic_hd.jpg

按照第一眼想到的,既然给定了p标签长度,超出长度就应该自动换行啊,现在是什么东西,竟然分成两行,就开始一系列尝试
1.加定固定长度,宽度,无效
2.给模型ID加span标签,给后面的设置display一顿捯饬,无效
3.设置word-wrap 属性 无效
看似这么简单的问题,怎么解决不了呢,平常的认知,超出就应该自动换行,难道不是吗,
淦淦淦,暴躁如我

查资料使用word-break: break-all;可以,之前以为的word-warp并不是解决这个问题的 记得word-wrap也是断词为何不行,查阅之后
官方回答:
word-wrap:

normal只在允许的断字点换行(浏览器保持默认处理)。
break-word在长单词或 URL 地址内部进行换行。

css的 word-wrap 属性用来标明是否允许浏览器在单词内进行断句,这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。

word-break:

normal使用浏览器默认的换行规则。
break-all允许在单词内换行。
keep-all只能在半角空格或连字符处换行。
css的 word-break 属性用来标明怎么样进行单词内的断句\

这。。。白说

简单一点,平时我们在浏览器中看到英文单词在宽度结尾处是不会分开展示的,浏览器会获取单词长度,如果剩下的长度不够放置就会换行,还有长串数字都会这样.类似于在编辑word

如果第二行也放不下这个长的单词或者长串数字,就会直接溢出,不会自动换行。

如果是文字的话就不会出现这种问题,一个文字的长度是不会占很大位置。会自动换行。

所以要想解决长串数字和长英文就需要使用 word-break超出设定的长度会直接截断进行换行展示,而word-wrap是为了解决长单词和长数字造成的换行,使读者不明白当前换行的单词是被截开的还是就是两个单词。

以此 发现这个小的问题,进行记录。