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

创建时间：2016-11-30 投稿人：浏览次数：827

转载请注明出处：http://blog.csdn.net/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>

这时鼠标划过时英文就不会溢出了，如图所示：

这里写图片描述

效果还是很明显的。这种功能一般在那种可以将div中的文字滑动出来，又可以隐藏回去的情况下会用到。

声明：该文观点仅代表作者本人，入门客AI创业平台信息发布平台仅提供信息存储空间服务，如有疑问请联系rumenke@qq.com。