div缩小时，里面的英文不会溢出功能的实现

最新推荐文章于 2021-06-07 18:12:59 发布

我是干勾鱼

最新推荐文章于 2021-06-07 18:12:59 发布

阅读量1.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Web前端文章标签： css div 英文溢出解决

本文链接：https://blog.youkuaiyun.com/dongdong9223/article/details/53405632

Web前端专栏收录该内容

32 篇文章

订阅专栏

本文介绍了一种防止英文文本在DIV元素中溢出的方法，通过使用CSS的word-break属性，确保长字符串能自动换行，适用于需要动态调整大小的布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

转载请注明出处：http://blog.youkuaiyun.com/dongdong9223/article/details/53405632
本文出自【我是干勾鱼的博客】

有时候我们经常需要将英文文字放在div中，当时当div缩小时，如果英文文字很多会溢出div。注意这里我们为什么会说“英文”呢？因为如果是中文的话会自动的被限制在div中。这里举各例子。代码如下：

<!DOCTYPE html>
<html>
<head>
<style> 
.aa
{
    width:250px;
    height:100px;
    background:blue;
    word-break:break-all;
    -moz-transition:width 2s; /* Firefox 4 */
    -webkit-transition:width 2s; /* Safari and Chrome */
    -o-transition:width 2s; /* Opera */
}

div.aa:hover
{
    transition:width 2s;
    width:100px;
}

.bb {
    border: solid yellow;
    background: red;
    z-index:9988;
}
</style>
</head>
<body>

<div class="aa">
    <div class="bb">aaabbbcccdddeeefffggg</div>
    <div class="bb">胡适的杂文很好看</div>
    <div class="bb">或者，你可以看看林语堂的小说</div>
</div>

</body>
</html>

例如，原页面如图：

这里写图片描述

当鼠标划过时，如图所示：

这里写图片描述

能够看出，英文由于过多溢出在div外面了（当然，中文默认就没有溢出）。

如何让因为也不溢出div呢，这里需要使用css的“word-break”属性，进行设置：

word-break:break-all;

w3school上说“word-break”的功能是“在恰当的断字点进行换行”，其实就是不让内容溢出。这个css属性设置了之后，内部的内容如果在一行中显示不出来就可以换行了。

加入了“word-break”属性之后的代码如下：

<!DOCTYPE html>
<html>
<head>
<style> 
.aa
{
    width:250px;
    height:100px;
    background:blue;
    word-break:break-all;
    -moz-transition:width 2s; /* Firefox 4 */
    -webkit-transition:width 2s; /* Safari and Chrome */
    -o-transition:width 2s; /* Opera */
}

div.aa:hover
{
    transition:width 2s;
    width:100px;
}

.bb {
    border: solid yellow;
    background: red;
    z-index:9988;
}
</style>
</head>
<body>

<div class="aa">
    <div class="bb">aaabbbcccdddeeefffggg</div>
    <div class="bb">胡适的杂文很好看</div>
    <div class="bb">或者，你可以看看林语堂的小说</div>
</div>

</body>
</html>