如何使用CSS将跨度更改为pre？

108

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

html css

— 视力
source

164

查看W3C CSS2.1默认样式表或CSS2.2工作草案。复制PRE的所有设置，并将其放入自己的班级。

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

— 狄奥多斯-詹姆斯·麦克法兰
source

1

这样做是一个好主意，以便了解这些默认值的来源。

— Diodeus-James MacFarlane，

2

当我尝试此操作时，不会保留换行符。

— Agnel Kurian

当文本太宽时，<pre>标记将显示水平滚动条，但是不会显示此CSS。有人知道如何向他们展示吗？

— shindigo 2014年

1

@shindigo您是否尝试过使用overflow: scroll？或者，如果您只想水平滚动overflow-x: scroll developer.mozilla.org/zh-CN/docs/Web/CSS/overflow

— Kanmuri 2014年

1

@shindigo overflow: auto;可能更好，否则在不需要它们时可能会得到两组滚动条。

— Spechal

57

请参见空白CSS属性。

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

— 皮斯托斯
source

7

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

— 凯·卡弗

25

这使SPAN看起来像PRE：

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

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

— Shiny和New安宇宇先生
source

5

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

white-space: pre

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

— 索伦·库克劳
source

2

试试这个

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

— 亚尼
source

1

试试这种风格

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

— 耶素·拉吉（Yusu Raj）
source

0

为什么不只使用<pre>标签而不是span标签呢？两者都是内联的，因此两者都应以您希望的方式运行。如果您在覆盖<pre>的整个定义时遇到问题，只需为其提供一个类/ id。

1

有时，页面上已经有一个跨度，无法更改它，就像它是现有CMS系统的一部分一样。

— Shiny先生和新安宇

B / c框架拒绝按照我的要求将内容放在我的<pre>下。我可以解决它，但这比设置一些CSS道具要困难得多。

— jsight