项目场景:
在处理文本设置超出省略号 text-overflow:ellipsis; 时,发现当用户输入英文或者数字,会直接溢出容器,并不会出现省略号
解决方法:
只需在外层盒子加上以下代码:
/*按兼容性写*/
word-break: break-all;
word-wrap: break-word;
/*也有加上overflow: hidden的*/
提示:word-break 兼容性要比 word-wrap 差一点
深入细节:
我们来聊聊 word-break: break-all; 和 word-wrap: break-word 的区别,直接来一个效果图:
其实一眼能看出问题来了对吧!具体的差别可以看 MDN 介绍或者看张鑫旭的 word-break:break-all和word-wrap:break-word的区别
例子源码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h4 { color: firebrick; }
.box {
width: 350px;
border: 1px solid firebrick;
margin: 20px 0px;
}
</style>
</head>
<body>
<h4>普通情况: </h4>
<div class="box">
<p>我是一个中国人,我生活在中国,我的名字叫cissy, 也叫balabalabalabalabalabal, henxihuanwanwanwanwanwanwanawanwanwanwanwan</p>
</div>
<h4>word-wrap: break-word; 长单词分行</h4>
<div class="box" style="word-wrap: break-word;">
<p>我是一个中国人,我生活在中国,我的名字叫cissy, 也叫balabalabalabalabalabal, henxihuanwanwanwanwanwanwanawanwanwanwanwan</p>
</div>
<h4>word-break: break-all; 全分行</h4>
<div class="box" style="word-break: break-all;">
<p>我是一个中国人,我生活在中国,我的名字叫cissy, 也叫balabalabalabalabalabal, henxihuanwanwanwanwanwanwanawanwanwanwanwan</p>
</div>
</body>
</html>
总结:
网上看到的解决方案不能直接搬,还是要验证一波,顺便看看前因后果。发现问题 - 解决问题 - 分析原因 - 下次保证没问题 !