inline-Element mit fester Breite und Zeilenumbruch davor

[Felix Riesterer]

Lieber Martin,

warum nicht ein fieldset anstatt des p-Elements?

ich habe in meinem echten Projekt ein fieldset um das <p>-Element herum. Um aber das Problem strukturell so einfach wie möglich zu halten, habe ich dieses gekürzt. Im Grunde hätte ich mir auch das <form>-Element im Beispiel sparen können - ob dann aber der Code noch valide gewesen wäre? Wahrscheinlich schon, wenn auch sinnfrei (<input> außerhalb eines <form> hat keine Wirkung).

Element mit der Pseudoklasse :after einen Zeilenumbruch erhält. Dieser Lösungsweg ist in meinem FF aber kläglich gescheitert.

Das dürfte daran liegen, dass ein Zeilenumbruch, wenn er mit der content-Eigenschaft eingefügt wird, die gleiche Wirkung hätte wie ein Zeilenumbruch im Quellcode: Er wird als Whitespace interpretiert.

Im Grunde hast Du Recht, jedoch habe ich mit white-space:pre-line definiert, dass Zeilenumbrüche in der Darstellung nicht geschluckt werden sollen (wie eben auch in einem <pre>-Element). Daher ist meine Erwartungshaltung nicht unbegründet.

select:after { white-space: pre-line; content: "\a"; }

Bist du sicher, dass du Linefeed meintest, und nicht Carriage Return oder gar eine Kombination aus beiden?

Ja. Diese Schreibweise ist sogar von der Spezifikation auf der W3C-Seite direkt übernommen.

Abgesehen davon ist die Notation irreführend: Auch wenn CSS keine C-typischen Escapes verwendet, denkt man beim Lesen von "\a" spontan zunächst an Ctrl-G. Die Notation "\0A" wäre lesefreundlicher.

Zugegeben. Das könnte ich für den menschlichen Leser verbessern.

label:before { white-space: pre-line; content: "\a"; }

Soweit klappt das in meinem FF auch.

Das überrascht mich - auch hier hätte ich erwartet, dass das Linefeed als normales Whitespace-Zeichen interpretiert wird.

Du kennst anscheinend die Eigenschaft "white-space" noch nicht so gut? Ist mir vor diesem Fall auch so gegangen... *g*

Allem Ehrgeiz zum Trotz halte ich aber wie Vinzenz Formulare für einen sinnvollen Einsatzfall von dl oder table.

Vinzenz hat Recht, wenn er meinen Lösungsansatz als akademische CSS-Übung (meine Worte) sieht. Ich werde wohl das Markup in eine Liste packen. Dann ist das Problem strukturell gelöst. Aber warum konnte ich es nicht mit reinen CSS-Mitteln lösen (akademische Frage)?

Liebe Grüße,

Felix Riesterer.