HTML不听话,CSS换行还是不行?

作者:孙宇晨 来源:www.5idf.cn 2020-11-21   阅读:

最近在自我训练时,在偶然之间发现了一个有趣的问题,也许对很多专家来说构不成是一个“问题”,那就变成复习一下吧!

同时但我也希望看到这位的初学者们能有所收获!

问题是这样的

 

有没有发现!为什么一个(粉红色)的结果跟two(绿色)的结果在相同的CSS样式设置下,一个会自动换行,另一个却会超过Box size?

在输入长字串时,常常会遇见这种问题。

三种属性帮你解决!! (溢出包装/自动换行/断字)

这边先介绍了overflow- wrap吧!

CSS属性overflow-wrap是当一个不能被分开的同轴太长而不能填充Box时,为了防止超过(重叠)Box,所以加入来浏览器允许换行。

◆冒号后有三个值:正常| 任何地方 断词

●normal:只能在正常的单词断点处中断。(例如:两个单词中间的空格)。

●任何地方:只要一碰到Box边界就换行。

●break-word:相同行如果没有没有多余的空间容纳该单词到结尾,则即使正常的单词也会被强制分割至下一行。

 

接下来小篇幅的提一下自动换行/断字!

◆换行

word-wrap属性原本是属于微软的专有属性,CSS3的文本规范声明中已重新命名为overflow-wrap。word-wrap现在被视为overflow-wrap的“别名”。

◆冒号(正常)| 全部 全部保留| 断词

●normal:使用预设的断行规则。

●break-all:对于非(中文/日文/韩文),可在任意字符间断行,可在英语单词间换行。

●keep-all:对于(中文/日文/韩文),不断行,只能在半型字/空格/连字符处换行。

●break-word:他的效果是word-break:正常;和overflow-wrap:antwhere; 的集合,肯定overflow-wrap的值是多少。

最后最后!加入省略符号

如果不想要把多出来的内容显示出来而想改成省略符号

可以在CSS中加入text-overflow:省略号。

提醒你!要把容器型态设定成display:block或display:inline-block(span容器推荐)!

分享给小伙伴们:
如果本文侵犯了您的权利, 请联系本网立即做出处理,谢谢。
当前位置:孙宇晨博客 > 互联网 > 《HTML不听话,CSS换行还是不行?转载请注明出处。
相关文章