Ich habe es das mal entsprechend dem unter dem Link [text-indent](https://wiki.selfhtml.org/wiki/Text-indent) angegebenen Beispiel ausprobiert und für meine Zwecke so umformuliert: ~~~css .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: ~~~html <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.

Ich habe es das mal entsprechend dem unter dem Link [text-indent](https://wiki.selfhtml.org/wiki/Text-indent) angegebenen Beispiel ausprobiert und für meine Zwecke so umformuliert: ~~~css .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: ~~~html <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.

Ich habe es das mal entsprechend dem unter dem Link [text-intend](https://wiki.selfhtml.org/wiki/Text-indent) angegebenen Beispiel ausprobiert und für meine Zwecke so umformuliert: ~~~css .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: ~~~html <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.

Ich habe es das mal entsprechend dem unter dem Link [text-intend](https://wiki.selfhtml.org/wiki/Text-indent) angegebenen Beispiel ausprobiert und für meine Zwecke so umformuliert: ~~~css .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: ~~~html code text here <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.

Ich habe es das mal entsprechend dem unter dem Link [text-intend](https://wiki.selfhtml.org/wiki/Text-indent) angegebenen Beispiel ausprobiert und für meine Zwecke so umformuliert: ~~~css .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 im Textabschnitt < span class="beispiel" > (Jede weitere Zeile ist mit < span > markiert.) 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.

Ich habe es das mal entsprechend dem unter dem Link [text-intend](https://wiki.selfhtml.org/wiki/Text-indent) angegebenen Beispiel ausprobiert und für meine Zwecke so umformuliert: ~~~css .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 im Textabschnitt < span class="beispiel" > (Jedes einzelne Bespiel ist mit < span > markiert.) 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.