:before content und Umbruch

[Christian Eyrich]

Hallo,

das Ziel ist, vor einen Link eine Grafik zu plazieren, und zwar mittels :before.

HTML:
<p>Beispiel mit <a href="#" id="test">etwas Text</a>.</p>
und
CSS:
a#test:before {content:url(bild.gif);}

Nun soll aber wenn das Konstrukt unglücklich liegt kein Umbruch zwischen Grafik und Text passieren.

Ist das nach CSS-Standard möglich ohne ein extra
a#test {white-space:nowrap;}
Bzw. wer macht's richtig, Mozilla oder Opera? Denn Mozilla bricht nach der Grafik um, Opera nicht.

Und ja, meine Abneigung gegen den Workaround ist begründet. Besteht nämlich der Linktext aus mehreren Worten, wird auch zwischen denen nicht umbrochen - und das kann sperrig werden.

In der CSS-Spec hab' ich schon nachgelesen aber nichts dazu gefunden.

Christian

[Christian Eyrich]

das Ziel ist, vor einen Link eine Grafik zu plazieren, und zwar mittels :before.

Warum so kompliziert?
Bei
<p><img src="bild.gif">Text</p>
wird ja auch zwischen Bild und Text auch umbrochen.

Also eine grundsätzliche Layout-Sache - aber auch dazu konnte ich in der HTML-Spec nix finden.

Christian

[MudGuard]

Hi,

<p>Beispiel mit <a href="#" id="test">etwas Text</a>.</p>
a#test:before {content:url(bild.gif);}
Nun soll aber wenn das Konstrukt unglücklich liegt kein Umbruch zwischen Grafik und Text passieren.
Ist das nach CSS-Standard möglich ohne ein extra
a#test {white-space:nowrap;}

Hast Du mal probiert, das white-space (pre oder nowrap) auf a#test:before anzuwenden?

cu,
Andreas

[Christian Eyrich]

Hast Du mal probiert, das white-space (pre oder nowrap) auf a#test:before anzuwenden?

Jo, alles schon probiert.
Aber da das white-space ja nur auf den dazugefügten Teil wirkt, hilft das nicht.

Genausowenig funktioniert
a#test:before {white-space:nowrap; content:url(bild.gif) " ";}
da das die Grafik zwar an das Space bindet, aber hinter dem Space wieder umbricht.

Es funktioniert
a#test:before {white-space:nowrap; content:url(bild.gif) "\A0";}
Das bindest das nbsp an die Grafik und das nbsp bindet sich an den nachfolgenden Text.

Aber erstens funktioniert das nicht wenn kein Zwischenraum zwischen Grafik und nachfolgenden Text kommen soll, zweitens ist es nicht gerade eingängig und drittens würde ich ja gerne wissen, ob das bei einem W3C-konformen Browser überhaupt nötig ist.

Christian

[MudGuard]

Hi,

Es funktioniert
a#test:before {white-space:nowrap; content:url(bild.gif) "\A0";}
Das bindest das nbsp an die Grafik und das nbsp bindet sich an den nachfolgenden Text.

Aber erstens funktioniert das nicht wenn kein Zwischenraum zwischen Grafik und nachfolgenden Text kommen soll,

font-size:0; oder font-size:1px; sollte das zumindest stark reduzieren.

Ansonsten: zero-width-joiner oder zero-width-space statt nbsp? (siehe http://www.unicode.org/charts/PDF/U2000.pdf)

zweitens ist es nicht gerade eingängig und drittens würde ich ja gerne wissen, ob das bei einem W3C-konformen Browser überhaupt nötig ist.

Umbruch an Wortgrenzen ist m.E. im Normalfall sinnvoll. Ein Bild ist nicht Bestandteil eines Wortes.

cu,
Andreas

[Christian Eyrich]

Hallo,

Aber erstens funktioniert das nicht wenn kein Zwischenraum zwischen Grafik und nachfolgenden Text kommen soll,

font-size:0; oder font-size:1px; sollte das zumindest stark reduzieren.

Ansonsten: zero-width-joiner oder zero-width-space statt nbsp? (siehe http://www.unicode.org/charts/PDF/U2000.pdf)

Danke, das werde ich mal testen.

Umbruch an Wortgrenzen ist m.E. im Normalfall sinnvoll. Ein Bild ist nicht Bestandteil eines Wortes.

Tja, IMHO auch. Aber die Spec sagt nicht immer was ich mir wünsche. :)

Christian