如何使用CSS将span样式更改成类似于pre的样式？

Question

是否可能仅使用CSS将标签（或

）更改为像

标签一样预格式化其内容？

- jsight

Answer 1

查看W3C CSS2.1默认样式表或者CSS2.2工作草案。将PRE的所有设置复制到你自己的类中。

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

- Diodeus

---

为了理解这些默认设置的来源，这样做是一个好主意。 - Diodeus - James MacFarlane

当我尝试这样做时，换行符并没有被保留。 - Agnel Kurian

<pre>标签在文本过宽时会显示水平滚动条，但这个 CSS 不会。有人知道如何显示它们吗？ - shindigo

@shindigo 你尝试过使用 overflow: scroll 吗？或者如果你只想要水平滚动，可以使用 overflow-x: scroll。https://developer.mozilla.org/zh-CN/docs/Web/CSS/overflow - Kanmuri

@shindigo overflow: auto; 可能更好，否则当您不需要它们时，可能会出现两组滚动条。 - Spechal

Answer 2

请查看CSS的white-space属性。

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

- Pistos

---

你可以使用white-space: pre-wrap，它的表现与pre相似，但会自动换行。 - Kai Carver

Answer 3

这使得一个看起来像

：
span {
  white-space: pre;
  font-family: monospace;
  display: block;
}
请记得根据需要更改 CSS 选择器。

- Mr. Shiny and New

Answer 4

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

white-space: pre

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

- S&#246;ren Kuklau

Answer 5

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

white-space: pre-wrap;

- Christophe Le Besnerais

Answer 6

试试这个

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

- Yanni

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

- Yesu Raj

Answer 8

为什么不直接使用

标签，而是使用标签呢？两者都是内联的，所以都应该按照您想要的方式运作。如果您在覆盖整个
标签的定义时遇到问题，只需给它一个类/ID即可。

- jlgosse

---

有时候你已经在页面上有一个跨度，而且不能改变它，比如它是现有CMS系统的一部分。 - Mr. Shiny and New 安宇

因为框架拒绝按照我的要求将内容放在<pre>标签下。我可以绕过它，但这比设置几个CSS属性要困难得多。 - jsight