CSS容器内容超出(溢出)自动换行代码(支持多浏览器)

最新推荐文章于 2024-06-25 10:02:26 发布

原创最新推荐文章于 2024-06-25 10:02:26 发布 · 542 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#浏览器 #CSS #HP #Opera #IE

本文介绍了一种CSS样式设置方法，该方法可以实现在不同浏览器间的良好兼容性，并确保文本能够正常断行显示。通过定义特定的CSS类，本文详细展示了如何设置border、clear属性及针对不同浏览器的white-space属性。

今天发现一很好的CSS代码

完美支持IE，Firefox，Opera等浏览器。

<style>

    .linebr {
        border:solid 1px red;
        clear: both; /* 清除左右浮动 */
        width: 100px; /* 必须定义宽度 */
        word-break: break-word; /* 文本行的任意字内断开 */
        word-wrap: break-word; /* IE */
        white-space: -moz-pre-wrap; /* Mozilla */
        white-space: -hp-pre-wrap; /* HP printers */
        white-space: -o-pre-wrap; /* Opera 7 */
        white-space: -pre-wrap; /* Opera 4-6 */
        white-space: pre; /* CSS2 */
        white-space: pre-wrap; /* CSS 2.1 */
        white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
        font-size:12px;
    }
</style>

<div class="linebr">ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss</div>