CSS 让 PRE 预格式化标签强制自动换行 - 文章教程

CSS 让 PRE 预格式化标签强制自动换行

发布于 2017-11-28 字数 2958 浏览 2228 评论 0

PRE 元素可定义预格式化的文本。被包围在 PRE 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

CSS 让 PRE 预格式化标签强制自动换行

<pre> 标签的一个常见应用就是用来表示计算机的源代码。对于技术博客经常会用到 PRE 标签输出代码或是代码高亮,而默认情况下,PRE 标签中的内容若超出范围不会自动换行。

下面介绍一个方法让 <pre> 标签中的内容自动换行并符合 W3C 标准(多浏览器支持)

pre{
  white-space:pre-wrap  /*css3.0*/
  white-space:-moz-pre-wrap  /*Firefox*/
  white-space:-pre-wrap  /*Opera4-6*/
  white-space:-o-pre-wrap  /*Opera7*/
  word-wrap:break-word  /*InternetExplorer5.5+*/
}

强制换行

自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的 white-space:normal ,所以基本不同考虑换行的问题。

连续的英文字符和阿拉伯数字,使用 word-wrap:break-word 或者 word-break:break-all 实现强制断行

#wrap{word-break:break-all; width:200px;}
#wrap{word-wrap:break-word; width:200px;}

连续的英文字符和阿拉伯数字的断行,Firefox 的所有版本的没有解决这个问题,我们只有让超出边界的字符隐藏,或者给容器添加滚动条

#wrap{word-break:break-all; width:200px; overflow:auto;}

对于 table 表格,IE 浏览器可以使用 table-layout:fixed 强制 table 的宽度,让多余内容自动隐藏

<table style="table-layout:fixed" width="200">
    <tr>
        <td>abcdefghigklmnopqrstuvwxyz1234567890</td>
    </tr>
</table>

单元格 td th 采用 word-break:break-all 或者 word-wrap:break-word 换行,里面如果嵌套了 div 或者 p 段落标签,也可以使用同样的方法。

对于 Firefox 浏览器,使用 table-layout:fixed 强制 table 的宽度,单元格 td th 采用 word-break:break-all 或者 word-wrap:break-word 换行,使用 overflow:hidden 隐藏超出内容,在这里设置 overflow:auto 是无法起作用的。

word-break

  • normal 依照亚洲语言和非亚洲语言的文本规则,允许在字内换行
  • break-all 该行为与亚洲语言的 normal 相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
  • keep-all 与所有非亚洲语言的 normal 相同。对于中文、韩文、日文、不允许字断开。适合包含少量亚洲文本的非亚洲文本与之间的高度解决办法

对于中文,应该使用 break-all 属性。

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2891 文章
评论
84935 人气
更多

推荐作者

勿忘心安

文章 0 评论

ekko

文章 0 评论

江挽川

文章 0 评论

献世佛

文章 0 评论

Meets

文章 0 评论