css 输入英文或数字时超出容器发生溢出

西西偷西瓜

于 2022-02-26 00:08:15 发布

阅读量769

点赞数 1

文章标签： css css3

本文链接：https://blog.csdn.net/qq_44622894/article/details/123143304

版权

本文介绍了在CSS中处理文本超出容器时，如何使用`word-break:break-all`和`word-wrap:break-word`实现省略号效果。通过示例代码展示了两者区别，`break-all`会强制单词断行，而`break-word`则确保单词不会超过容器边界。在解决英文和数字溢出问题时，需结合`overflow:hidden`使用。

摘要由CSDN通过智能技术生成

项目场景：

在处理文本设置超出省略号 text-overflow:ellipsis; 时，发现当用户输入英文或者数字，会直接溢出容器，并不会出现省略号

解决方法：

只需在外层盒子加上以下代码：

/*按兼容性写*/
word-break: break-all;
word-wrap: break-word;
/*也有加上overflow: hidden的*/

提示：word-break 兼容性要比 word-wrap 差一点
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>