在HTML中数字和数字不会自动换行，链接超出显示
·
问题描述
当我们在html中使用中文的时候，是可以自动换行的，如下：
<style>
.box{
width: 300px;
height: 100px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box">
<p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
</div>
</body>
</html>
以上是代码，下面是效果图
如图使用的是中文，可以自动实现自动换行。
但是如果把内容换成字母、链接、或者是数字，就会这样：
如上图，内容不会自动换行，且会超出父级的范围，链接也会超出显示
原因分析：
当使用连续的英文字母时，系统会认为这整个内容是一个单词，所以不会换行，链接同理
解决方案：
可以在样式添加这两个代码（任选其一）
.box p{
word-break:break-all;
/* 允许在单词内换行 */
}
word-break:break-all;的兼容性如下图（不支持较旧版本的火狐和欧朋）
.box p{
word-wrap: break-word;
/* 在长单词或 URL 地址内部进行换行。 */
}
word-wrap: break-word;的兼容性如下图（兼容性较好）
更多推荐
3
0- 0
已为社区贡献1条内容
所有评论(0)