CSS : Background-color multi-line-text?
Haben Sie eine Idee, fügen Sie eine "hintergrund-Farbe" - Eigenschaft auf eine multi-line-text, mit zwei Schwierigkeiten:
- Hintergrund müssen aufhören, nach dem letzten Wort jeder Zeile
- Kein Leerzeichen zwischen jeder Zeile, ohne hintergrund
Beispiel :
Dank !
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ich denke, das ist, was du suchst: http://jsfiddle.net/9BTYQ/1/
CSS:
HTML:
box-decoration-break: clone;
. Siehe meine Artikel zu AntwortDen
box-shadow
Lösung wie von @gabitzish aufgehört zu arbeiten korrekt in IE11 und FF34+ (veröffentlicht am 09-2014).Können Sie hinzufügen
box-decoration-break:clone;
zu machen, arbeiten in IE11 und FF34+ zu:Funktioniert in Webkit, Firefox, IE9+ mit der richtigen Präfixe.
Demo : http://jsfiddle.net/cLh0onv3/1/
Hinweis: Bereits erklärte, dass dieser anderswo.
Ich gefunden habe, diese Lösung funktioniert gut in Kombination mit der box-shadow-Methode und einige entsprechende Polsterung auf einer
<p>
element um die<span>
elementhttp://jsfiddle.net/tsoligo/mMg4B/
Bekommen es perfekt mit reinem CSS ist schwierig und nur machbar, unter bestimmten Bedingungen. Zum Beispiel, wenn Sie mit Pausen und legen Sie die line-height zu groß, sehen Sie Lücken dazwischen. Und was ist mit der Polsterung um die Seiten?
Darüber hinaus müssen Sie spannt und wird nur verunstalten Sie das markup.
Glücklicherweise Sam Croft kam mit einem einfachen jQuery-plugin, um dem entgegenzuwirken. Es ist schnell, leicht und funktioniert unter den meisten Bedingungen.
Artikel: http://samcroft.co.uk/2011/jquery-plugin-for-inline-text-backgrounds/
Demo: http://samcroft.co.uk/demos/inline-backgrounds/
Quelle: https://github.com/samcroft/css-inline-backgrounds/blob/master/inline-backgrounds.js
Ändert nur die Anzeige im Feld Typ auf inline:
CSS:
HTML:
Und wenn es Raum zwischen jeder Zeile, setzen Sie dann
font-size
gleichline-height
oder v. v.Dies ist einer der Unterschied zwischen
<span>
und<p>
tags.Diese
box-shadow
Beispiel funktioniert einfach toll:HTML
CSS
JSFiddle: http://jsfiddle.net/verber/WmRT3/
P. S. Aber nicht im IE8...