First word in css

Sadly even with the likes of CSS 3 we still do not have the likes of :first-word :last-word etc using pure CSS. Thankfully there’s almost a JavaScript nowadays for everything which brings me to my recommendation. Using nthEverything and jQuery you can expand from the traditional Pseudo elements.

Currently the valid Pseudos are:

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

And using nth Everything we can expand this to:

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

answered Mar 24, 2015 at 20:36

answered Sep 11, 2008 at 1:17

Here’s a bit of JavaScript and jQuery I threw together to wrap the first word of each paragraph with a <span> tag.

$(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>';
        }
    });
});

You can then use CSS to create a style for .firstWord.

It’s not perfect, as it doesn’t account for every type of whitespace; however, I’m sure it could accomplish what you’re after with a few tweaks.

Keep in mind that this code will only execute after page load, so it may take a split second to see the effect.

answered Feb 19, 2013 at 22:35

There isn’t a plain CSS method for this. You might have to go with JavaScript + Regex to pop in a span.

Ideally, there would be a pseudo-element for first-word, but you’re out of luck as that doesn’t appear to work. We do have :first-letter and :first-line.

You might be able to use a combination of :after or :before to get at it without using a span.

answered Sep 11, 2008 at 1:21

An easy way to do with HTML+CSS:

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>

I find JavaScript being the best way to achieve this.
Below is the JS code to set an element’s First Word as the element’s innerText

let text = document.querySelector('.menu_text');
const words = menu_text.innerHTML.toString().split(' ');
text.innerText = words[0];

answered Mar 13, 2022 at 12:32

My idea to make it possible is use a php function to get a first word of the string and then use a CSS styling to give this word different color. Here how i use this for H1 tag. Here how you can get first word if you work on PHP.

<?php  
    $string = "Read more";
    echo '<h1><span>' . strtok($string, " ") . '</span>' . $string . '</h1>'; 
?>

CSS

h1 {
    position: relative;
    display: inline-block;
    margin: 0;
}
h1 > span {
    position: absolute;
    color: blue;
    text-shadow: 0px 0px 1px blue;
}

Here is the snippet only for demonstration how it looks when your PHP script will return the HTML code on your page or you want use only a HTML.

h1 {
    position: relative;
    display: inline-block;
    margin: 0;
}
h1 > span {
    position: absolute;
    color: blue;
    text-shadow: 0px 0px 1px blue;
}

<h1><span>Read</span>Read more</h1>

answered Dec 16, 2022 at 2:00

Insert Span Tag in your paragraph text. For Example-
<p><span>Hello</span>My Name Is Dot</p
and then style the first letter.

• CSS

• 
  Вопрос задан

  более трёх лет назад
  

• 11561 просмотр

• Неужели вам проще зайти на тостер, задать вопрос и ждать, пока вам ответят, чем зайти в гугл, вбить ваш вопрос и в 1-м же результате поиска прочитать ответ на него?

• 

• Евгений Привалов: вы так и не попытались погуглить, я вчера погуглил за вас, и вот то, что по вашей ссылке — реализация на js, велосипед, хак, и НЕ псевдоэлемент CSS

• 

  А я начал гуглить, чтобы самому, без чьей либо помощи, найти ответ, и первым в выдаче гугла был именно этот вопрос на тостере(((

Минуточку внимания