html - StackOverflowでコード表示スタイルを実装するにはどうすればよいですか？

Question

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

上記のように、Webページに1行で表示するコード行（1行で表示するには長すぎます）があります。

2行に折りたたむのではありません。

cssのみを使用してこれを達成できますか？

score 4 · Accepted Answer

間にスペースを入れた単語を使用するときに実際にこれを実現するにoverflow:autoは、も必要text-overflow: nowrapです。

score 3 · Accepted Answer

SOのコードブロックは次のようになります。

<pre>
  <code>
    <span>...</span>
  </code>
</pre>

そしてCSS：

pre {
  overflow: auto;
}

デモ： http： //jsfiddle.net/TfeLm/

score 1 · Accepted Answer

私はあなたが探していると思いますoverflow:auto：

<div style="overflow:auto; width:200px;">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

score 1 · Accepted Answer

包含要素（たとえばdiv）を作成し、幅を定義するいくつかの基本的なCSSプロパティを設定し、オーバーフローを処理します。このような：

HTML

<div class="short">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

CSS：

.short {
    width:400px;
    padding: 10px;
    overflow-x:scroll;
}

jsFiddleの例。最新のすべてのブラウザとIE8で動作します。

score 0 · Accepted Answer

overflow私はあなたが値を持つプロパティを探していると思いますauto：

<style>pre { width: 200px; overflow: auto; }</style>
<pre><code>&lt;p&gt;Some tooooo long text on one line&lt;/&gt;</code></pre>

score 0 · Accepted Answer

次のCSSを使用する必要があると思います

#id {
    width: 400px;
    padding: 5px;
    background: #C3C3C3;
    overflow-x: scroll
}

このライブ例を見る

6 に答える 6