Textformatierung zur Einrückung

[Laurenz]

Ich habe es das mal entsprechend dem unter dem Link text-indent angegebenen Beispiel ausprobiert und für meine Zwecke so umformuliert:

 .beispiel         { padding: 0; margin: 0; }
 .beispiel span      { padding-left: 5em; text-indent: -5em; }
 .beispiel span > *  { text-indent: 0; }

Das ergibt dann tatsächlich das gewünschte Bild hier:

<p>... <br />zum Beispiel: 
 <span class="beispiel">erstes Beispiel
  <span>zweites Beispiel</span>
  <span>drittes Beispiel</span>
 </span>
</p>

Allerdings nur, wenn kein Zeilenumbruch eintritt. Dieser zerstört das schöne Bild wieder, dann rückt der Text wieder an den linken Rand und ergibt ein Durcheinander. :(

Ich könnte Zeilenumbrüche verbieten. Aber das wäre auch suboptimal.