Samstag, Januar 25, 2020

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 :

CSS : Background-color multi-line-text?

Dank !

InformationsquelleAutor user1677010 | 2012-10-03

7 Kommentare

  1. 13

    Ich denke, das ist, was du suchst: http://jsfiddle.net/9BTYQ/1/

    CSS:

    span {
        color: white;
        background-color: #343132;
        box-shadow: 0.5em 0 0 #343132,-0.5em 0 0 #343132;
    }
    
    div {
        width: 100px;
    }

    HTML:

    <div>
        <span>Do you have an idea to add a background-color property on a multi-line text, with two difficulties:</span>
    </div>   

    • Perfekt ! Dank
    • Netter workaround.
    • In diesem Fall haben wir keine freien Räume an den Anfang jeder Zeile… Es nicht wors für mich 🙁
    • Diese Lösung hatte funktioniert bestens. Aber IE11 und FF34 sind es nicht unterstützen, also Vorsicht!
    • FF34+ behoben werden, mit box-decoration-break: clone;. Siehe meine Artikel zu Antwort
  2. 5

    Den 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:

    p {
        display: inline;
        padding: 0.5em 0em;
        background-color: #FFAA3B;
        box-shadow: 1em 0 0 #FFAA3B, -1em 0 0 #FFAA3B;
        box-decoration-break: clone;
    }

    Funktioniert in Webkit, Firefox, IE9+ mit der richtigen Präfixe.

    Demo : http://jsfiddle.net/cLh0onv3/1/

    Hinweis: Bereits erklärte, dass dieser anderswo.

  3. 3

    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> element

    p {
      display:block;
      padding:0 10px;
      font-size:2em;
    }
    
    span {
      color: white;
      background:#333;
      box-shadow: 0 0 0 10px #222;
      padding:0;
      line-height:1.5;
    }

    http://jsfiddle.net/tsoligo/mMg4B/

  4. 1

    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

    • Seit einigen zukünftigen Browser brechen mit der box-shadow-Technik, fühlt sich wie Js vielleicht die beste Lösung für diese
  5. 1

    Ändert nur die Anzeige im Feld Typ auf inline:

    p {
      display: inline;
    }

    CSS:

    body {
      width: 170px;
    }
    p {
      display: inline;
      background: black;
      color: white;
    }

    HTML:

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

    Und wenn es Raum zwischen jeder Zeile, setzen Sie dann font-size gleich line-height oder v. v.

  6. 0

    Dies ist einer der Unterschied zwischen <span> und <p> tags.

    <span style="background:black; color:white;">
    Lorem Ipsum is simply dummy text of the<br>
    printing and typesetting industry.<br>
    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
    <br> when an unknown printer took a galley of type
    <br> and scrambled it to make a type specimen book.</span>
  7. 0

    Diese box-shadow Beispiel funktioniert einfach toll:

    HTML

    <p class="title step-1">
        <span class="highlight">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, qui suscipit error quasi tempore magni sit nostrum aliquam soluta vel. Dolorem, reprehenderit sint molestiae in est perspiciatis quas accusantium commodi. </span>
    </p>

    CSS

    .title {
      font: 20px/1.25 Ubuntu, sans-serif;
      text-transform: uppercase;
      margin-bottom: 1rem;
      line-height: 45px;
      display: inline-block;
      width: 300px;
    }
    .title .highlight {
      display: inline;
      background: #ee4035;
      color: white;
      padding: 0.5rem;
      padding-left: 0;
      padding-right: 0;
    }
    .title.step-1 .highlight {
      box-shadow: 10px 0 0 #ee4035, -10px 0 0 #ee4035;
    }

    JSFiddle: http://jsfiddle.net/verber/WmRT3/

    P. S. Aber nicht im IE8…

Kostenlose Online-Tests