span标签里内容过长超出盒子宽度却不换行

badalia

于 2024-11-22 11:42:12 发布

阅读量792

点赞数 10

CC 4.0 BY-SA版权

文章标签：开发语言 ecmascript css

本文链接：https://blog.csdn.net/s0interesting/article/details/143964866

1.一般情况下只需要加上以下几个属性就可以了


span {
            display: inline-block;
            width: 100px;
            word-break: break-all;
            white-space: normal;
}

<body>
    <span>qwertyuiopasdfghjklzxcvb</span>
</body>

2.现在来详解一下这几个属性

2.1.white-space

顾名思义就是控制空白格字符的显示，默认是normal，

white-space:normal 连续空格会被缩减为一个，换行符无效（<br>），但句子超过一行会自动换行，但如果是单个单词太长超过一行会直接超出边框，如以下的incomprehensibilities,

white-space:nowrap 顾名思义就是不自动换行，多个空格合并，只有<br>才能导致换行

white-space:pre 多个空格都会被保留，不会合并成一个空格，但是不能自动换行

white-space:pre-wrap 多个空格全被保留，且可以自动换行

2.2.word-break 控制单词如何被拆分换行

word-break:normal 默认效果

word-break:break-all 所有单词碰到边界一律拆分换行，只要碰到边界，都会被强制拆分换行,如下图所示长单词incomprehensibilities被强制拆分换行

word-break:keep-all 所有“单词”一律不拆分换行，只有空格可以触发自动换行, 这里的“单词”包括连续的中文字符（还有日文、韩文等），效果如下所示

2.3.word-wrap（overflow-wrap）控制长度超过一行的单词是否被拆分换行

word-wrap:nomal 默认长度超出一行的单词不换行

word-wrap: break-word 只有当一个单词一整行都显示不下时，才会拆分换行该单词。