Text und Bild in einer Zeile - Verhalten bei Zeilenumbruch

[Redaxo]

Hallo zusammen!

Ich habe folgendes Problem:

In mehrere Zeilen werden aus Datenbanken unterschiedlich lange Textzeilen geladen. Hinter jede dieser Textzeile kommt eine kleine Icon-Grafik. Nun kann es vorkommen, dass eine Textzeile genau so lang ist, dass der Text in eine Zeile passt, nicht aber die Grafik - unschön!

Beispiel:

Dies ist ein kurzer Text.GRAFIK

Dies ist ein viel zu langer Text.
GRAFIK

Damit die Grafik im zweiten Beispiel nicht allein in der neuen Zeile steht, möchte ich es so haben:

Dies ist ein viel zu langer
Text.GRAFIK

Problem: Ich kann keine <br>-Tags einbauen, da die Textzeilen ja automatisch aus der Datenbank kommen.

Gibt es vielleicht eine smarte CSS-Lösung, die mir weiterhilft?

Viele Grüße!

[Matthias Apsel]

Om nah hoo pez nyeetz, Redaxo!

Problem: Ich kann keine <br>-Tags einbauen, da die Textzeilen ja automatisch aus der Datenbank kommen.

aber vielleicht Leerzeichen, an denen nicht umgebrochen werden soll? &nbsp;

Matthias

[Der Martin]

Hallo,

Problem: Ich kann keine <br>-Tags einbauen, da die Textzeilen ja automatisch aus der Datenbank kommen.
aber vielleicht Leerzeichen, an denen nicht umgebrochen werden soll? &nbsp;

das hilft aber meiner Erfahrung nach nicht, weil Bilder hinsichtlich des Zeilenumbruchs anscheinend wie non-word characters angesehen werden. Direkt vor oder direkt nach einem Bild kann man den Umbruch AFAIK nicht verhindern.

Setzt man ein &nbsp; zwischen Text und Bild, klebt das &nbsp; zwar brav am Rest vom Text, zwischen &nbsp; und Bild wird aber trotzdem getrennt.

Ich lasse mich zwar gern eines Besseren belehren, nur habe ich mich auch schon gelegentlich über genau diesen Effekt geärgert.

Ciao,
 Martin

[Matthias Apsel]

Om nah hoo pez nyeetz, Der Martin!

aber vielleicht Leerzeichen, an denen nicht umgebrochen werden soll? &nbsp;

das hilft aber meiner Erfahrung nach nicht,

Stimmt.

nobr hilft. (Allerdings dem TO vielleicht auch nicht, obwohl es sicher möglich ist, das letzte Leerzeichen durch ein <nobr> zu ersetzen und dem img ein </nobr> hintenanzustellen.

Das Dokument wäre nicht valide, die aktuellen (Windows-)Browser verhalten sich alle wunschgemäß.

Matthias

[Matthias Apsel]

Om nah hoo pez nyeetz, Matthias Apsel!

nobr hilft. (Allerdings dem TO vielleicht auch nicht, obwohl es sicher möglich ist, das letzte Leerzeichen durch ein <nobr> zu ersetzen und dem img ein </nobr> hintenanzustellen.

Das Dokument wäre nicht valide, die aktuellen (Windows-)Browser verhalten sich alle wunschgemäß.

Dafür gibt es ebenfalls eine CSS-Lösung:
<span class="nobr"> und für diese Elemente white-space: nowrap;

Matthias

[Gunnar Bittersmann]

@@Der Martin:

nuqneH

Setzt man ein &nbsp; zwischen Text und Bild, klebt das &nbsp; zwar brav am Rest vom Text, zwischen &nbsp; und Bild wird aber trotzdem getrennt.

Hm, wie wär’s dann mit

p:after  
{  
  content: "";  
  display: inline-block;  
  width: 2em;  
  height: 1em;  
  background-image: url(…);  
}

Die Problemstellung lässt vermuten, dass die Bilder sowieso der Verzierung dienen.

Qapla'

[Matthias Apsel]

Om nah hoo pez nyeetz, Gunnar Bittersmann!

Hm, wie wär’s dann mit

p:after

{
  content: "";
  display: inline-block;
  width: 2em;
  height: 1em;
  background-image: url(…);
}

  
[Ungetestet sollte man Gunnar auf keinen Fall widersprechen](http://forum.de.selfhtml.org/archiv/2013/8/t214769/#m1470179), deshalb hab ich es getestet:  
  
Ich habe mich gestern gefragt, an welcher Stelle des CSS wohl dem Browser mitgeteilt wird, das Pseudoelement möge niemals allein in seiner Zeile sein. Ich fand die Stelle nicht und mich heute im FF bestätigt. Es ist sehr wohl möglich, das Bild allein in die nächste Zeile zu schreiben.  
  
Im FF (29, Windows) ist aber  
~~~css
p {  
	position: relative;  
	padding-right: 30px;  
	display: inline-block;  
}  
p::after {  
        content: "";  
	position: absolute;  
	margin-left: 5px;  
	width: 30px;  
	height: 30px;  
	background: url(…);  
}

zielführend. Andere Browser nicht getestet

Matthias

[Matthias Apsel]

Om nah hoo pez nyeetz, Matthias Apsel!

Andere Browser nicht getestet

Chrome ist widerborstig.

Bei ihm steht das Pseudoelement grundsätzlich in einer neuen Zeile. Was sich aber ändert, wenn man dem p-Element sein display: block lässt. Interessanterweise ändert sich damit auch nicht das Verhalten der anderen Browser. Allerdings kann dann das Pseudoelement im Chrome wieder allein in einer Zeile stehen.

Matthias

[Matthias Apsel]

Om nah hoo pez nyeetz, Matthias Apsel!

Allerdings kann dann das Pseudoelement im Chrome wieder allein in einer Zeile stehen.

Das war der Fall, weil das p-Element mit einem Leerzeichen endete. Damit heißt die Lösung für alle relevanten Windows-Browser: kein Leerzeichen am Ende und

p {  
        position: relative;  
        padding-right: 30px;  
}  
p::after {  
        content: "";  
        position: absolute;  
	display: inline-block;  
        margin-left: 5px;  
        width: 30px;  
        height: 30px;  
        background: url(…);  
}

oder nach Belieben auch mit echtem Bild ohne Leerzeichen vor dem Bild

p {  
        position: relative;  
        padding-right: [Bildbreite];  
}  
img {  
        position: absolute;  
	display: inline-block;  
        margin-left: 5px;  
}

Matthias

[Gunnar Bittersmann]

@@Redaxo:

nuqneH

Damit die Grafik im zweiten Beispiel nicht allein in der neuen Zeile steht, möchte ich es so haben:

Dies ist ein viel zu langer
Text.GRAFIK

<p>{{Text aus DB}}&nbsp;<img …></p>

Qapla'