如何使用 CSS 将跨度更改为看起来像 pre？答案

【问题标题】：How to change a span to look like a pre with CSS?如何使用 CSS 将跨度更改为看起来像 pre？
【发布时间】：2008-10-20 17:24:33
【问题描述】：

是否可以更改 <span> 标记（或 <div>）以预格式化其内容，就像 <pre> 标记仅使用 CSS 一样？

【问题讨论】：

标签： html css

【解决方案1】：

查看W3C CSS2.1 Default Style Sheet 或CSS2.2 Working Draft。复制 PRE 的所有设置并将它们放入您自己的类中。

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

【讨论】：

这样做是个好主意，以便了解这些默认值的来源。
当我尝试这个时，不会保留换行符。

 标签会在文本太宽时显示水平滚动条，但这个 css 不会。有人知道怎么给他们看吗？

@shindigo 你试过使用overflow: scroll吗？或者如果你只想要水平滚动overflow-x: scrolldeveloper.mozilla.org/en-US/docs/Web/CSS/overflow
@shindigo overflow: auto; 可能会更好，否则您可能会在不需要时得到两组滚动条。

【解决方案2】：

见the white-space CSS property。

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

【讨论】：

或者，您可能会发现white-space: pre-wrap 很有用。它的行为类似于pre，但换行很长。

【解决方案3】：

这使得 SPAN 看起来像 PRE：

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

记得根据需要更改 css 选择器。

【讨论】：

【解决方案4】：

具体来说，您正在查看的属性是：

white-space: pre

http://www.quirksmode.org/css/whitespace.html
http://www.w3.org/TR/CSS21/text.html#white-space-prop

【讨论】：

【解决方案5】：

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

white-space: pre-wrap;

【讨论】：

【解决方案6】：

试试这个

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

【讨论】：

【解决方案7】：

试试这种风格

.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/

【讨论】：

【解决方案8】：

为什么不直接使用

 标签，而不是 span 标签呢？两者都是内联的，因此两者都应该按照您想要的方式运行。如果您在覆盖  的整个定义时遇到问题，只需给它一个 class/id。

【讨论】：

有时您已经在页面上有一个跨度并且无法更改它，例如它是现有 CMS 系统的一部分。

B/c 框架拒绝按照我要求的方式将内容放在我的

 下。我可以解决它，但这比设置一些 CSS 道具要困难得多。