Html 如何使用 CSS 将跨度更改为看起来像 pre ？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/219219/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change a span to look like a pre with CSS?
提问by jsight
Is it possible to to change a <span>tag (or <div>) to preformat its contents like a <pre>tag would using only CSS?
是否可以更改<span>标签（或<div>）以预先格式化其内容，就像<pre>仅使用 CSS的标签一样？
回答by Diodeus - James MacFarlane
Look at the W3C CSS2.1 Default Style Sheetor the CSS2.2 Working Draft. Copy all the settings for PRE and put them into your own class.
查看W3C CSS2.1 默认样式表或CSS2.2 工作草案。复制 PRE 的所有设置并将它们放入您自己的类中。
pre {
display: block;
unicode-bidi: embed;
font-family: monospace;
white-space: pre;
}
回答by Pistos
回答by u7867
This makes a SPAN look like a PRE:
这使 SPAN 看起来像 PRE：
span {
white-space: pre;
font-family: monospace;
display: block;
}
Remember to change the css selector as appropriate.
请记住根据需要更改 css 选择器。
回答by S?ren Kuklau
Specifically, the property you're looking at is:
具体来说，您正在查看的属性是：
white-space: pre
http://www.quirksmode.org/css/whitespace.html
http://www.w3.org/TR/CSS21/text.html#white-space-prop
http://www.quirksmode.org/css/whitespace.html
http://www.w3.org/TR/CSS21/text.html#white-space-prop
回答by Yanni
Try this
尝试这个
span {
white-space: pre;
font-family: monospace;
display: block;
unicode-bidi: embed
}
回答by Yesu Raj
Try this style
试试这个风格
.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; /* IE7+ */
display: block;
}
Used the same here - http://www.makemyshop.in/
在这里使用相同 - http://www.makemyshop.in/
回答by Yesu Raj
Why not just use the <pre> tag, instead of the span tag? Both are inline, so both should behave in the way you would like. If you have a problem overriding the entire definition of <pre>, just give it a class/id.
为什么不使用 <pre> 标签，而不是 span 标签？两者都是内联的，因此两者都应该按照您希望的方式运行。如果您在覆盖 <pre> 的整个定义时遇到问题，只需给它一个 class/id。
