CSS zum Auswählen / Stylen des ersten Wortes

Dieser hat mich irgendwie verblüfft. Ich möchte das erste Wort aller Absätze in meinem #content div bei 14pt anstelle des Standardwerts für die Absätze (12pt) setzen. Gibt es eine Möglichkeit, dies in direktem CSS zu tun, oder muss ich das erste Wort in einer Zeitspanne umbrechen, um dies zu erreichen?

Was Sie suchen, ist ein Pseudoelement, das es nicht gibt. Es gibt: ersten Buchstaben und: erste Zeile, aber nein: erstes Wort.

Sie können dies natürlich mit JavaScript tun. Hier ist ein Code, den ich gefunden habe: http://www.dynamicsitesolutions.com/javascript/first-word-selector/

Ich muss Dale nicht zustimmen ... Das starke Element ist eigentlich das falsche Element, was etwas über die Bedeutung, Verwendung oder Betonung des Inhalts impliziert, während Sie einfach beabsichtigen, dem Element Stil zu verleihen.

Idealerweise können Sie dies mit einer Pseudoklasse und Ihrem Stylesheet erreichen. Da dies jedoch nicht möglich ist, sollten Sie Ihr Markup semantisch korrekt machen und verwenden <span class="first-word">.

Gleiches gilt für jQuery:

$('#links a').each(function(){
    var me = $(this);
    me.html( me.text().replace(/(^\w+)/,'<strong>$1</strong>') );
  });

oder

$('#links a').each(function(){
    var me = $(this)
       , t = me.text().split(' ');
    me.html( '<strong>'+t.shift()+'</strong> '+t.join(' ') );
  });

(Über 'Wizzud' auf der jQuery Mailing List )

Leider haben wir selbst mit CSS 3 noch keine ähnlichen Funktionen wie :first-word :last-wordreines CSS. Zum Glück gibt es heutzutage fast ein JavaScript für alles, was mich zu meiner Empfehlung bringt. Mit nthEverything und jQuery können Sie die traditionellen Pseudo-Elemente erweitern.

Derzeit sind die gültigen Pseudos:

• :first-child
• :first-of-type
• :only-child
• :last-child
• :last-of-type
• :only-of-type
• :nth-child
• :nth-of-type
• :nth-last-child
• :nth-last-of-type

Und mit nth Everything können wir dies erweitern auf:

• ::first-letter
• ::first-line
• ::first-word
• ::last-letter
• ::last-line
• ::last-word
• ::nth-letter
• ::nth-line
• ::nth-word
• ::nth-last-letter
• ::nth-last-line
• ::nth-last-word

Reine CSS-Lösung:

Verwenden Sie die: First-Line-Pseudoklasse.

display:block;
Width:40-100px; /* just enough for one word, depends on font size */
Overflow:visible; /* so longer words don't get clipped.*/
float:left; /* so it will flow with the paragraph. */
position:relative; /* for typeset adjustments. */

Hab das nicht getestet. Ich bin mir ziemlich sicher, dass es für dich gut funktionieren wird. Ich habe zuvor Blockregeln auf Pseudoklassen angewendet. Möglicherweise haben Sie für jedes erste Wort eine feste Breite, also richten Sie den Text aus: Mitte; und gib ihm einen schönen Hintergrund oder etwas, um mit dem negativen Raum umzugehen.

Hoffe das funktioniert bei dir. :) :)

-Motekye

Sie müssen das Wort in eine Spanne einschließen, um dies zu erreichen.

Verwenden Sie das starke Element, das ist sein Zweck:

<div id="content">
    <p><strong>First Word</strong> rest of paragraph.</p>
</div>

Erstellen Sie dann einen Stil dafür in Ihrem Stylesheet.

#content p strong
{
    font-size: 14pt;
}

Hier ist ein bisschen JavaScript und jQuery, die ich zusammengeschmissen habe, um das erste Wort jedes Absatzes mit einem <span>Tag zu versehen.

$(function() {
    $('#content p').each(function() {
        var text = this.innerHTML;
        var firstSpaceIndex = text.indexOf(" ");
        if (firstSpaceIndex > 0) {
            var substrBefore = text.substring(0,firstSpaceIndex);
            var substrAfter = text.substring(firstSpaceIndex, text.length)
            var newText = '<span class="firstWord">' + substrBefore + '</span>' + substrAfter;
            this.innerHTML = newText;
        } else {
            this.innerHTML = '<span class="firstWord">' + text + '</span>';
        }
    });
});

Sie können dann CSS verwenden, um einen Stil für zu erstellen .firstWord.

Es ist nicht perfekt, da es nicht jede Art von Leerzeichen berücksichtigt. Ich bin mir jedoch sicher, dass es mit ein paar Änderungen das erreichen kann, wonach Sie suchen.

Beachten Sie, dass dieser Code erst nach dem Laden der Seite ausgeführt wird. Daher kann es einen Sekundenbruchteil dauern, bis der Effekt sichtbar wird.

Hierfür gibt es keine einfache CSS-Methode. Möglicherweise müssen Sie JavaScript + Regex verwenden, um eine Zeitspanne zu erreichen.

Idealerweise gibt es ein Pseudoelement für das erste Wort, aber Sie haben kein Glück, da dies nicht zu funktionieren scheint. Wir haben: erster Buchstabe und: erste Zeile.

Möglicherweise können Sie eine Kombination aus: nach oder: vor verwenden, um ohne Verwendung einer Spanne darauf zuzugreifen.

Fügen Sie das Span-Tag in Ihren Absatztext ein. Zum Beispiel - <p><span>Hello</span>My Name Is Dot</p und dann den ersten Buchstaben stylen .

Eine einfache Möglichkeit, mit HTML + CSS umzugehen:

TEXT A <b>text b</b>

<h1>text b</h1>

<style>
    h1 { /* the css style */}
    h1:before {content:"text A (p.e.first word) with different style";    
    display:"inline";/* the different css style */}
</style>