Wie kann ich den Codeanzeige-Stil in StackOverflow implementieren?

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

Ich habe eine Codezeile (die zu lang ist, um in einer Zeile angezeigt zu werden), um auf einer Webseite in einer Zeile angezeigt zu werden, genau wie oben.Wie kann ich den Codeanzeige-Stil in StackOverflow implementieren?

Ich es nicht in zwei Zeilen gewickelt werden.

Kann ich dies nur mit CSS erreichen?

Quelle

2012-04-10 Yishu Fang

http://code.google.com/p/google-code-prettify/ verwenden sollten – David

tatsächlich Um dies geschehen, wenn Sie Wörter mit Leerzeichen verwenden, um zwischen ihnen overflow:auto nicht ist Genug, du brauchst auch text-overflow: nowrap.

http://jsfiddle.net/kZV3j/

Quelle

2012-04-10 15:48:57

Hier ist, wie SO der Codeblock aussieht:

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

Und die CSS:

pre { 
    overflow: auto; 
}

Demo: http://jsfiddle.net/TfeLm/

Quelle

2012-04-10 15:42:02 Blender

Überlauf ohne eine angegebene mit wird nicht funktionieren ... (und das 'span' ist nicht gut) –

ich bitte um zu unterscheiden? Bevor Sie HTML und CSS in Ihrem Kopf analysieren, testen Sie es zumindest: http://jsfiddle.net/TfeLm/ – Blender

Sie haben Recht. Das pre-Element hat eine Standardbreite: 100%; so funktioniert es. –

Ich glaube, Sie suchen overflow:auto:

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

Quelle

2012-04-10 15:42:27 Travesty3

nicht inline CSS verwenden –

Downvote für die Verwendung von Inline-CSS? Es ist ein schnelles Beispiel. Es funktioniert gut. Ich schlage nicht vor, ein gesamtes Projekt mit Inline-CSS zu programmieren. – Travesty3

Ja, schnelles Beispiel oder nicht vermeiden Sie mit Inline-CSS. Eine Antwort muss einen guten Weg zeigen, nicht ein schnelles und schmutziges Beispiel. –

Ein umgebendes Element erstellen (z. ein div), dann legen Sie einige grundlegende CSS-Eigenschaften auf, die eine Breite definieren und den Überlauf behandeln. Wie folgt aus:

HTML

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

CSS:

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

jsFiddle example. Funktioniert in allen modernen Browsern und IE8.

Quelle

2012-04-10 15:43:14 j08691

Ich glaube, Sie suchen die overflow Eigenschaft mit einem auto Wert:

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

anschauliches Beispiel: http://jsbin.com/uhuveg/

Quelle

2012-04-10 15:44:05

Ihr Beispiel zeigt keine Bildlaufleiste (zumindest nicht in Firefox). – Travesty3

Es tut in IE, so dachte ich, es funktioniert auf jedem Browser :) Ich denke, das Problem wird beantwortet [von Stephan Muller] (http://Stackoverflow.com/a/10092046/1149495) –

Ich glaube, dass Sie die folgende CSS

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

Sehen Sie diese Live-example

Quelle

2012-04-10 17:42:13 jacktheripper

Wie kann ich den Codeanzeige-Stil in StackOverflow implementieren?

Antwort

Verwandte Themen