Wie ein Zeilenumbruch/continuation-style und code-Formatierung mit css

Bei der Darstellung von vorformatiertem text im web (z.B. code-Beispiele), Zeilenumbruch kann ein problem sein. Sie wollen wickeln, zur besseren Lesbarkeit, ohne scrollen, aber es müssen auch eindeutig sein, um den Benutzer, dass es ist alles eine Zeile, ohne Zeilenumbruch.

Zum Beispiel, Sie haben eine wirklich lange Befehlszeile angezeigt, wie diese:

c:\Program Files\My Application\Module\bin\..> Some_really_long_command line "with parameters" "that just go on and on" " that should all be typed on one line" "but need to be wrapped for display and I'd like the text style to indicate that it has wrapped"

(Stackoverflow Kräfte diese Zeile nicht umbrochen wird.)

Gibt es einen Weg, styling mit CSS zu geben, die gleiche Behandlung, wie Sie sehen in den Büchern? d.h., wickeln Sie die Linie, aber ein Bild oder eine Glyphe, zeigt eine Zeile fortgesetzt.

Offensichtlich ich bin auf der Suche nach einem Stil, der angewendet werden kann, sämtliche Texte, und lassen Sie den browser die XHTML/CSS-rendering-engine herauszufinden, welche Zeilen umbrochen wurden und daher brauchen die eine Besondere Behandlung.

Die Lösung so weit..

Hinzufügen Zeile Fortsetzung Glyphen

Dank Jack Ryan und Maarten Sander, eine einigermaßen brauchbare Lösung hinzufügen Fortsetzung Glyphen entweder Links oder rechts von umbrochenen Zeilen. Es erfordert ein Bild mit sich wiederholenden Zeichen in die vertikale, die ist versetzt, so dass es unsichtbar ist, wenn nur eine ausgepackt Linie. Die wichtigste Voraussetzung dieser Technik ist, dass jede Zeile muss innerhalb eines Blockes (z.B. p, span oder div). Dies bedeutet, es kann leicht verwendet werden, die manuell mit vorhandenen text, der einfach nur sitzen in einem pre-block.

Fragment unten fasst die wesentlichen Technik. Ich habe eine live-Beispiel hier.

.wrap-cont-l {
  margin-left: 24px;
  margin-bottom: 14px;
  width: 400px;
}

.wrap-cont-l p {
  font-family: Courier New, Monospace;
  font-size: 12px;
  line-height: 14px;
  background: url(wrap-cont-l.png) no-repeat 0 14px; /* move the background down so it starts on line 2 */
  text-indent: -21px;
  padding-left: 14px;
  margin: 0 0 2px 7px;
}

.wrap-cont-r {
  margin-left: 24px;
  margin-bottom: 14px;
  width: 400px;
}

.wrap-cont-r p {
  font-family: Courier New, Monospace;
  font-size: 12px;
  line-height: 14px;
  background: url(wrap-cont-r.png) no-repeat right 14px; /* move the background down so it starts on line 2 */
  text-indent: -28px;
  margin: 0 0 2px 28px;
  padding-right: 14px;
}

Werden wie folgt verwendet:

<div class="wrap-cont-l">
  <p>take a long line</p>
  <p>take a long line</p>
</div>
<div class="wrap-cont-r">
  <p>take a long line</p>
  <p>reel him in</p>
</div>

Aber Wartezeit, dort ist mehr!

Ich vor kurzem entdeckt habe syntaxhighlighter von Alex Gorbatschow. Es ist ein fantastisches Werkzeug für dynamisch und automatisch formatieren von text-Blöcken. Es ist hauptsächlich gedacht für syntax-highlighting-code, aber könnte verwendet werden, für einen beliebigen text. In v1.5.1 es ist jedoch nicht umbrechen von Zeilen (in der Tat, es zwingt Sie nicht zu wickeln).

Habe ich ein wenig daran herum zu hacken, obwohl, und war in der Lage, einen einfachen Zeilenumbruch-option syntaxhighlighter und beinhalten auch die Fortsetzung Glyphe Idee.

Ich habe dies nur Hinzugefügt, um die live-Beispiele und enthalten ein paar Hinweise zu den hacks erforderlich (Sie sind trivial). So wie der text in der Seite:

<textarea name="code" class="java:wraplines" cols="60" rows="10">
public class HelloWorld {

  public static void main (String[] args)

  {

    System.out.println("Hello World! But that's not all I have to say. This line is going to go on for a very long time and I'd like to see it wrapped in the display. Note that the line styling clearly indicates a continuation.");

  }

}
</textarea>

Dies ist eine Momentaufnahme in das formatierte Ergebnis:

screenshot http://tardate.com/syntaxhighlighter/line-continuation-example.jpg

InformationsquelleAutor tardate | 2008-12-01