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

最新推荐文章于 2020-10-08 22:21:54 发布

仓底储备粮

最新推荐文章于 2020-10-08 22:21:54 发布

阅读量434

点赞数

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

本文链接：https://blog.csdn.net/qq_43466173/article/details/85317868

版权

博客探讨了在限定div长度后，Chrome与Firefox对文本自动换行的处理差异。通过添加CSS属性`word-wrap: break-word; overflow: hidden;`，解决了火狐浏览器中文本不换行的问题，并提供了前后代码示例及更新后的效果展示。

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

限定一个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;
        }

效果图：
在这里插入图片描述