CSS中设置了宽度，但是其中的内容溢出而不换行

最新推荐文章于 2024-04-27 21:35:02 发布

小程小程心想事程

最新推荐文章于 2024-04-27 21:35:02 发布

阅读量3.1k

点赞数 6

分类专栏： css html 文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/cheng1a/article/details/128714408

版权

html 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

css

1 篇文章 0 订阅

订阅专栏

CSS中设置了宽度，但是其中的内容溢出而不换行

当我们为div标签或者p标签等设置了宽度，会出现文本溢出并且不会换行的情况，一般这种情况都是只有文本内容为单词或者纯数字的时候出现的。
原因是由于：浏览器在解析我们页面的时候，给这一串数字当成一个词了，这样就不会自动切断字符串而进行换行。

解决方法：

方法一：

word-break: break-all;

方法二：

word-break: break-word;

两种方法的区别在于：
方法一：内容到达指定宽度强行断句换行，一个单词显示不开将会截断换行继续展示；
方法二：当前单词在宽度内无法展示，整个单词换行展示；

举个例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title></title>
    <style type="text/css">
        .div1{
		    width: 400px;
		    word-break: break-all;
		}
		.div2{
		    width: 400px;
		    word-break: break-word;
		}
    </style>
</head>
<body>
   <div class="div1">"Time," says the proverb, "is money". This means that every moment well-spent may put some money into our pockets.</div>
	<br/>
	<div class="div2">"Time," says the proverb, "is money". This means that every moment well-spent may put some money into our pockets.</div>
	<br/>
	<div class="div1">A1901,B1902,C1903,D1904,E1905,F2001,G2002,H2003,I2004,J2005,K2101,L2102,M2103,N2104,O2105</div>
	<br/>
	<div class="div2">A1901,B1902,C1903,D1904,E1905,F2001,G2002,H2003,I2004,J2005,K2101,L2102,M2103,N2104,O2105</div>
</body>
</html>

实现效果如下：
在这里插入图片描述
显而易见：
word-break: break-all;会将单词截断换行显示；
word-break: break-word;会整个单词换行显示

小程小程心想事程

关注

6
点赞
踩
8

收藏

觉得还不错? 一键收藏
5
评论
CSS中设置了宽度，但是其中的内容溢出而不换行

当我们为div标签或者p标签等设置了宽度，会出现文本溢出并且不会换行的情况，一般这种情况都是只有文本内容为单词或者纯数字的时候出现的。原因是由于：浏览器在解析我们页面的时候，给这一串数字当成一个词了，这样就不会自动切断字符串而进行换行。：内容到达指定宽度强行断句换行，一个单词显示不开将会截断换行继续展示；：当前单词在宽度内无法展示，整个单词换行展示；会将单词截断换行显示；
复制链接

扫一扫