如何改变一个跨度看起来像一个预与 CSS？

是否有可能改变 <span>标签(或 <div>)来预格式化其内容，就像使用 CSS 的 <pre>标签一样？

html
css

62827 次浏览

小开

最佳答案

看看 W3C CSS2.1默认样式表或者 CSS2.2工作草稿。复制 PRE 的所有设置并把它们放到你自己的类中。

pre {
display: block;
unicode-bidi: embed;
font-family: monospace;
white-space: pre;
}

小开

参见空白 CSS 属性。

.like-pre { white-space: pre; }

小开

具体来说，你看到的财产是:

white-space: pre

Http://www.quirksmode.org/css/whitespace.html
Http://www.w3.org/tr/css21/text.html#white-space-prop

小开

为什么不直接使用 < pre > 标记，而不使用 span 标记呢？两者都是内联的，因此它们都应该按照您希望的方式运行。如果在覆盖 < pre > 的整个定义时遇到问题，只需给它一个 class/id。

小开

这使得 SPAN 看起来像是 PRE:

span {
white-space: pre;
font-family: monospace;
display: block;
}

请记住适当地更改 css 选择器。

小开

试试这个

span {
white-space: pre;
font-family: monospace;
display: block;
unicode-bidi: embed
}

小开

试试这种风格

.pre {


white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
line-height: 1.5;
word-break: break-all;
white-space: pre;
white-space: pre\9; /* IE7+ */
display: block;
}

这里也是 http://www.makemyshop.in/

小开

虽然接受的答案确实是正确的，但如果你希望文本换行，你应该使用:

white-space: pre-wrap;