CSS - first letter capitalize

Question

It is possible to make ONLY the first character set to uppercase with css? (e.g: :first-char selector)

in short: if the text start with a number, do not apply the conversion (capitalize) afterwards

table.evenOdd tr td::first-letter{
        text-transform:capitalize;
    }

the table

<table class="evenOdd">
    <tr>
        <td style="width: 50%">question 1</td>
        <td><b>100 mm</b></td>
    </tr>
    <tr>
        <td>question 2</td>
        <td><b>Success</b></td>
    </tr>
    <tr>
        <td>question 3</td>
        <td><b>42 kilometer</b></td>
    </tr>  
</table>

and the result is
Question 1 | 100 Mm -- nok i want mm
Question 2 | Success -- ok
Question 3 | 42 Kilometer -- nok i want kilometer

Does this answer your question? [Capitalize first letter of sentences CSS](https://stackoverflow.com/questions/11129696/capitalize-first-letter-of-sentences-css) — francisco, Nov 08 '22 at 17:38

DBS · Accepted Answer · 2022-11-08T17:08:14.343

3

::first-letter only works on block-level elements.

From MDN's documentation:

The ::first-letter CSS pseudo-element applies styles to the first letter of the first line of a block-level element, but only when not preceded by other content (such as images or inline tables).

Set your spans to inline-block for this to work:

span {
  display: inline-block;
}

span::first-letter {
  text-transform: capitalize;
}

<span>success</span>
<span>Warning</span>
<span>10 cm</span>
<span>128 kilometer</span>

edited Nov 08 '22 at 17:08

answered Nov 08 '22 at 17:00

DBS

9,110
4
35
53

Yes I thought of that, almost perfect but my data is in a table in td elements, so the inline-block causes my table to fall apart :// – neurodede Nov 08 '22 at 17:16
It sounds like we might need a slightly more complete example of your layout in the original question to be able to provide a suitable answer. – DBS Nov 08 '22 at 17:19

score 0 · Answer 2 · answered Nov 08 '22 at 16:55

0

Try this

span::first-letter {
    text-transform: uppercase;
}

answered Nov 08 '22 at 16:55

cameronErasmus

180
8

I could not find better, but the `` must also have `display: block` and not be preceded by other content (such as images or inline tables) : https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter – julien.giband Nov 08 '22 at 17:04

score 0 · Answer 3 · answered Nov 08 '22 at 17:00

0

Let's try this:

.uppercase {
  display: inline-block; 
  text-transform: lowercase;
}

.uppercase:first-letter {
  text-transform: uppercase
}

<span class="uppercase">success</span> 
<span class="uppercase">Warning</span> 
<span>10 <span class="uppercase">cm</span></span> 
<span>128 <span class="uppercase">kilometer</span></span>

answered Nov 08 '22 at 17:00

Anh Le Hoang

339
1
9

The idea is good, but I have a lot of data 5000+ so I don't want to modify the content at html level (then I could modify the text itself to display properly) -- I want to save time! :> – neurodede Nov 08 '22 at 17:05
With the much data case, i think that you should the pre-format data by JS before show them. – Anh Le Hoang Nov 08 '22 at 17:28

CSS - first letter capitalize

3 Answers3