火狐谷歌文本自动换行兼容性

版权声明：本博客为博主原创,未经允许不能转载 https://blog.csdn.net/qq_43466173/article/details/85317868

限定一个div长度，发现超出div长度的文本谷歌可以自动换行而火狐不会，解决方法：

• 重点语句：word-wrap:break-word; overflow:hidden;

上代码
html:

<div class="message">
    <span>ddddddddddddddddddddddddddddddddddddddddddddddd</span>
</div>

css:

.message {
            background-color: #1EAFF9;
            max-width: 100px;
            padding: 5px;
            color: white;
        }

        span{
            word-break: break-all;
        }

效果图：

然后我们在外层的div的message类里面加上 word-wrap:break-word; overflow:hidden;
更新后的css代码：

.message {
            background-color: #1EAFF9;
            max-width: 100px;
            padding: 5px;
            color: white;
            word-wrap:break-word;
            overflow:hidden;
        }

效果图：