CSSでpreのように見えるようにスパンを変更するにはどうすればよいですか？

108

<span>タグ（または<div>）を変更して、<pre>CSSのみを使用するタグのようにコンテンツをプリフォーマットすることはできますか？

html  css 
— jsight
ソース

回答:

164

見W3C CSS2.1のデフォルトのスタイルシートやCSS2.2ワーキングドラフト。PREのすべての設定をコピーして、独自のクラスに配置します。

pre {
    display: block;
    unicode-bidi: embed;
    font-family: monospace;
    white-space: pre;
}
— Diodeus-James MacFarlane
ソース
1
これらのデフォルトがどこから来るのかを理解するために、この方法で行うことは良い考えです。
— Diodeus-James MacFarlane 08年
2
これを試すと、改行が保存されません。
— Agnel Kurian 2014
<pre>タグは、テキストが広すぎる場合に水平スクロールバーを表示しますが、このCSSは表示しません。誰かがそれらを表示する方法を知っていますか？
— shindigo 2014
1
@shindigo使ってみましたoverflow: scrollか？または、水平スクロールのみが必要な場合overflow-x: scroll developer.mozilla.org/en-US/docs/Web/CSS/overflow
— Kanmuri
1
@shindigoのoverflow: auto;方が優れている場合があります。そうしないと、スクロールバーが不要になったときに2セットのスクロールバーが表示される可能性があります。
— Spechal
25

これにより、SPANはPREのようになります。

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

必要に応じてcssセレクターを変更することを忘れないでください。

— Shiny and New安宇さん
ソース
2

これを試して

span {
    white-space: pre;
    font-family: monospace;
    display: block;
    unicode-bidi: embed
}
— ヤニ
ソース
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/

— イエス・ラージ
ソース
0

なぜspanタグの代わりに<pre>タグを使用しないのですか？どちらもインラインなので、どちらも希望どおりに動作するはずです。<pre>の定義全体を上書きすることに問題がある場合は、クラス/ IDを指定してください。

1
場合によっては、ページに既にスパンがあり、既存のCMSシステムの一部であるかのように、ページを変更できないことがあります。
— 氏氏Shiny and New安宇
B / cフレームワークが、私の<pre>の下にコンテンツを配置することを拒否しています。私はそれを回避することができましたが、それはいくつかのCSS小道具を設定することよりもはるかに困難です。
— jsight 2008年
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.