webentwicklung-frage-antwort-db.com.de

Ändern Sie die letzte Buchstabenfarbe

Beispielcode:

<p class="test">string</p>

Ich möchte die Farbe des letzten Buchstabens ändern, in diesem Fall "g", aber ich brauche eine Lösung mit css, ich brauche keine Javascript-Lösung.

Ich zeige die Zeichenfolge Buchstabe für Buchstabe an und kann keine statische Lösung verwenden.

23
user1979270

Wenn Sie kein Javascript verwenden, ist Ihre einzige Option:

<p class="test">strin<span class="other-color">g</span></p>

Bearbeiten für Ihren Geigenlink:

Ich weiß nicht genau, warum Sie sagten, Sie hätten keine Javascript-Lösung benötigt, da Sie bereits einiges davon haben. Unabhängig davon müssen Sie in diesem Beispiel nur ein paar kleine Änderungen vornehmen. Zeile 10 von ändern

elem.text(elem.text() + contentArray[current++]);

zu

if ( current == contentArray.length-1 ) {
    elem.html(elem.html() + "<span style='color:red'>"+contentArray[current++]+"</span>");
} else {
    elem.html(elem.html() + contentArray[current++]);
}

Beachten Sie, dass es wichtig ist, jetzt .html() anstelle von .text() zu verwenden, da tatsächlich HTML-Markup eingefügt wird.

Geige arbeiten: http://jsfiddle.net/QTUsb/2/

9
David Kiger

Jeder sagt, dass es nicht geht. Ich bin hier, um das zu beweisen.

Ja, es ist can erledigt.

Okay, es ist ein schrecklicher Hack, aber es kann gemacht werden.

Wir müssen zwei CSS-Funktionen verwenden:

  • Erstens bietet CSS die Möglichkeit, die Richtung des Textflusses zu ändern. Dies wird normalerweise für Skripts wie Arabisch oder Hebräisch verwendet, funktioniert jedoch für jeden Text. Wenn wir es für englischen Text verwenden, werden die Buchstaben in umgekehrter Reihenfolge angezeigt, wie sie im Markup erscheinen. Um also den Text als Word "String" für ein umgekehrtes Element anzuzeigen, müssten wir Markup haben, das "gnirtS" liest.

  • Zweitens verfügt CSS über den Pseudoelement-Selektor ::first-letter, der den ersten Buchstaben im Text auswählt. (Andere Antworten haben bereits festgestellt, dass dies verfügbar ist, es gibt jedoch keinen entsprechenden ::last-letter-Selektor.)

Wenn wir nun den ::first-letter mit dem umgekehrten Text kombinieren, können wir den ersten Buchstaben von "gnirtS" auswählen, aber es sieht so aus, als würden wir den letzten Buchstaben von "String" auswählen.

So sieht unser CSS so aus:

div {
    unicode-bidi:bidi-override;
    direction:rtl;
}

div::first-letter {
    color: blue;
}

und HTML:

<div>gnirtS</div>

Ja, das funktioniert - Sie können die Arbeitsgeige hier sehen: http://jsfiddle.net/gFcA9/

Aber wie gesagt, es ist ein bisschen hackig. Und wer möchte seine Zeit damit verbringen, alles rückwärts zu schreiben? Nicht wirklich eine praktische Lösung, aber sie beantwortet die Frage.

145
Spudley

Verwenden Sie ::after Pseudoelement kombiniert mit attr() function: 

p::after {
    content: attr(data-end) ;
    color: red ;
}
<p data-end="g">Strin</p>

p::after {
  content: attr(data-end) ;
  color: red ;
}
<p data-end="g">Strin</p>

30
Supersharp

Eine andere Lösung ist die Verwendung von ::after

.test::after{
 content:"g"
 color:yellow;
}
<p class="test">strin</p>

Diese Lösung ermöglicht das Ändern der Farbe aller Zeichen, nicht nur der Buchstaben, wie die Antwort von Spudley, die ::first-letter verwendet. Weitere Informationen finden Sie unter ::first-letterSpezifikation . ::first-letter gilt nur für Buchstaben, die Interpunktionszeichen ignorieren. 

Wenn Sie mehr als das letzte Zeichen einfärben möchten, können Sie außerdem:

.test::after{
  content:"ing"
  color:yellow;
}
<p class="test">str</p>

Weitere Informationen zu :: after finden Sie unter link .

17
Marc_Alx

Dies konnte nur mit CSS und einem ::after-Pseudoelement ohne HTML-Änderungen erreicht werden:

.test {
  font-size: 16pt;
  position: relative;
}
.test::after {
  bottom: 0;
  color: red;
  content: 'g';
  position: absolute;
  transform: translate(-100%, 0);
}
<p class="test">string</p>

5
Jastrzebowski

In welcher Weise "zeigen Sie die Zeichenfolge Buchstabe für Buchstabe" an? Wenn Sie die Zeichen in einer Zeichenfolge (Variable) durchlaufen, können Sie sicherlich feststellen, wann Sie sich am letzten Buchstaben befinden, und in einen Buchstaben einschließen, ob dies auf der Serverseite oder auf der Clientseite geschieht.

Schauen Sie sich die Fiedel an, die mit einer anderen Ihrer Fragen verbunden sind ...

Wenn Sie hierüber sprechen, müssen Sie möglicherweise den .innerHTML des Elements anstelle von element.text() einstellen.

Von der Geige bei http://jsfiddle.net/SLKEn/ würden Sie es in etwas ändern

if(current < contentArray.length) {
    elem.html(
            elem.html() +
              (current == contentArray.length-1 ?
               '<span class="lastchar">' + contentArray[current++] + '</span>' :
               contentArray[current++])
             );
        }

zusammen mit CSS span.lastchar { color: red; }


Update: Working Fiddle basierend auf Ihrer anderen Frage.

1
Stephen P

$(document).ready(function() {
  var str=$("span").text();
  strArr=str.split("");
  for(var key=0;key<=strArr.length-1;key++) {
    if(key==strArr.length-1) {
      var newEle="<span id='lastElement'>"+strArr[key]+"</div>";
      strArr[key]=newEle;
    }
  }
  var newtext=strArr.join("");
  $("span").html(newtext);  
});
  
span#lastElement {
  color: red;
}

0
shaan gola

ich habe nicht die Möglichkeit, einen Antwort-Thread zu kommentieren, aber ich wollte auf einen Fehler in einem Antwort von Marc_Alx hinweisen, der ansonsten wunderbar funktioniert. Diese Lösung funktionierte für mich nur, nachdem Sie hinter der content-Eigenschaft ein Semikolon hinzugefügt haben ... also sieht es aus wie content:"ing";

.test::after{
  content:"ing";
  color:yellow;
}
<p class="test">str</p>
0
joeinfo