Text farblich hinterlegen - Mit CSS unmöglich?

[Birke]

Huhuu!

Ich habe eine h1, die ich gerne wie im Bild unten, farblich hinterlegen würde.

Nun die Herausforderung, für die ich bisher keine Lösung fand:

Bricht die h1 um, soll auch nach dem letzten Wort ein Abstand mit 10px zu sehen sein und nicht direkt am Text aufhören. Es sollen die Worte umflossen werden und kein Block um die gesamte Breite des Textes entstehen. Leider kann ich die h1, aus SEO Gründen, nicht in drei einzelne Zeilen zerlegen. Der Text ist variabel und kommt aus einem Feed.

Das geht mit CSS nicht. Oder?

Danke & Gruß, Birke

So hätte ich es gerne:

Die beiden bekomme ich hin, so möchte ich es jedoch nicht haben:

 

[rodriguez]

Geht meines Erachtens nicht per CSS. Krücke: händisch jeweils am Umbruch zusätzlich zum Leerzeichen zwei   einfügen, dann macht es zumindest einen Abstand

 

[Birke]

Danke für die Bestätigung, dass CSS so etwas nicht kann.

Händisch ist leider nicht drin, da der Content aus einem Feed kommt und es keinen Redakteur gibt, der dies tun könnte. Alle anderen Lösungen die mir einfielen, gehen aus SEO-Gründen leider nicht.

 

[xplor3]

und damit gehts auch nicht?

h1 {
padding: 10px;}

 

[Birke]

Nein, denn dies betrifft ja nur das drum herum, nicht aber den Umbruch selbst.

 

[doger]

Hast Du Deinen Vorschlag denn mal ausprobiert?

//doger

 

[Birke]

Meinst Du Energy oder mich?

 

[doger]

Ich meinte Energy.

Unter Umständen könnte das mit JS funktionieren.
Muss aber gestehen das ich keine Ahnung habe ob, oder wie, sich abfragen lässt das ein line brake erfolgt.

//doger

 

[xplor3]

nein, den hab ich nicht ausprobiert, war jetzt nur so auf die Schnelle aus dem Kopf

 

[Birke]

War auch mein erster Gedanke als es an das Problem ging ...

 

[xplor3]

hmm wenn ich mal so überlege hat die weisse Box damit ja eigentlich gar nichts zu tun, das soll ja vom Text ausgehen, also soll vom Text abhängen
denn wenn man die Box definiert, dann kann es durchaus Komplikationen geben mit dem Text, entweder Schrift zu groß, Text zu lang
mit Div-Container (für Text) müsste sowas doch machbar sein?

 

[Birke]

Die h1 ist fest definiert und die Zeichenanzahl wird vorher vom Server im Notfall gekürzt.

 

[Birke]

Übrigens, es gab doch noch eine Möglichkeit den Umbruch sauber hinzubekommen:

{
white-space: pre;
}