html - 如何使用CSS将跨度更改为pre?

是否可以更改<span>标签(或<div>)以预先格式化其内容,如<pre>标签仅使用CSS?

jsight asked 2019-08-13T10:54:25Z
7个解决方案
137 votes

查看W3C CSS2.1默认样式表或CSS2.2工作草案。 复制PRE的所有设置并将它们放入您自己的类中。

pre {
    display: block;
    unicode-bidi: embed;
    font-family: monospace;
    white-space: pre;
}
Diodeus - James MacFarlane answered 2019-08-13T10:54:38Z
53 votes

请参阅white-space CSS属性。

.like-pre { white-space: pre; }
Pistos answered 2019-08-13T10:55:03Z
24 votes

这使得SPAN看起来像PRE:

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

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

Mr. Shiny and New 安宇 answered 2019-08-13T10:55:35Z
5 votes

具体而言,您正在查看的属性是:

white-space: pre

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

Sören Kuklau answered 2019-08-13T10:56:13Z
1 votes

试试这个

span {
    white-space: pre;
    font-family: monospace;
    display: block;
    unicode-bidi: embed
}
Yanni answered 2019-08-13T10:56:33Z
0 votes

为什么不使用&lt; pre&gt; 标签,而不是span标签? 两者都是内联的,因此两者都应该按照您希望的方式运行。 如果您在覆盖&lt; pre&gt;的整个定义时遇到问题,请为其指定一个类/ ID。

answered 2019-08-13T10:56:58Z
0 votes

试试这种风格

.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 answered 2019-08-13T10:57:29Z
translate from https://stackoverflow.com:/questions/219219/how-to-change-a-span-to-look-like-a-pre-with-css