CSS: Hintergrundfarbe bei mehrzeiligem Text?
Haben Sie eine Idee, eine Eigenschaft "background-color" in einem mehrzeiligen Text mit zwei Schwierigkeiten hinzuzufügen:
- Der Hintergrund muss nach dem letzten Wort jeder Zeile aufhören
- Kein Leerzeichen zwischen jeder Zeile ohne Hintergrund
Beispiel:
Danke!
7 Antworten
Die box-shadow -Lösung, wie von @gabitzish gezeigt, funktioniert in IE11 und FF34 + nicht mehr (veröffentlicht am 09-2014).
Sie können box-decoration-break:clone; hinzufügen, damit es auch in IE11 und FF34 + funktioniert:
Funktioniert in Webkit, Firefox, IE9 + mit korrekten Präfixen.
Demo: Ссылка
Hinweis: Bereits anderswo angegeben.
Ich fand, dass diese Lösung gut mit einer Kombination aus der Box-Shadow-Methode und einem entsprechenden Padding für ein <p> -Element um das <span> -Element
Es ist schwierig und nur unter bestimmten Bedingungen möglich, es mit reinem CSS zu perfektionieren. Wenn Sie beispielsweise Pausen verwenden und die Zeilenhöhe zu groß festlegen, werden Lücken dazwischen angezeigt. Und was ist mit der Polsterung an den Seiten?
Außerdem benötigen Sie Spannen und das wird nur Ihr Markup vereinheitlichen.
Glücklicherweise hat Sam Croft ein einfaches jQuery-Plugin entwickelt, um dem entgegenzuwirken. Es ist schnell, leicht und funktioniert unter den meisten Bedingungen.
Artikel: Ссылка
Demo: Ссылка
Quelle: Ссылка
Dies ist einer der Unterschiede zwischen <span> und <p> -Tags.
Dieses box-shadow Beispiel funktioniert einfach großartig:
HTML
%Vor%CSS
%Vor%JSFiddle: Ссылка
P.S. Aber nicht in IE8 ...
Tags und Links css