pre: 滚动条(overflow)与自动换行(word wrap)
今天lesca介绍下如何实现HTML标签pre的自动换行与自动滚动条。这些特性都可以使用CSS实现。我们先介绍自动滚动条：
<pre style="overflow:auto">
预览一下：
This is "pre" tag test for browers... This is "pre" tag test for browers... This is "pre" tag test for browers... This is "pre" tag test for browers... This is "pre" tag test for browers... This is "pre" tag test for browers... This is "pre" tag test for browers... This is "pre" tag test for browers... This is "pre" tag test for browers... This is "pre" tag test for browers... This is "pre" tag test for browers... This is "pre" tag test for browers... This is "pre" tag test for browers... This is "pre" tag test for browers... This is "pre" tag test for browers... This is "pre" tag test for browers... This is "pre" tag test for browers... This is "pre" tag test for browers... This is "pre" tag test for browers... This is "pre" tag test for browers... This is "pre" tag test for browers... This is "pre" tag test for browers... This is "pre" tag test for browers... This is "pre" tag test for browers... This is "pre" tag test for browers... This is "pre" tag test for browers... This is "pre" tag test for browers... This is "pre" tag test for browers... This is "pre" tag test for browers... This is "pre" tag test for browers... This is "pre" tag test for browers... This is "pre" tag test for browers... This is "pre" tag test for browers... This is "pre" tag test for browers... This is "pre" tag test for browers... This is "pre" tag test for browers... This is "pre" tag test for browers... This is "pre" tag test for browers... This is "pre" tag test for browers... This is "pre" tag test for browers... This is "pre" tag test for browers... This is "pre" tag test for browers... This is "pre" tag test for browers... This is "pre" tag test for browers... This is "pre" tag test for browers... This is "pre" tag test for browers... This is "pre" tag test for browers... This is "pre" tag test for browers...
这样，浏览器就能在需要时自动添加滚动条了。如果要实现自动换行，而不要滚动条，只需要这样设定：
<pre style="overflow:hidden;word-wrap:break-word;">
那么上面的内容就会变成这样：
版权声明
本文出自 Lesca 技术宅，转载时请注明出处及相应链接。
本文永久链接: https://www.lesca.cn/archives/pre-overflow-and-word-wrap.html
