Why Css text-transform capitalize not working?

Question

I have an example text and it all Uppercase. I want to make it capitalized text, but css text-transform doesn't work. How can i do this?

span,
a,
h2 {
  text-transform: capitalize !important;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<span class="ml-5 mt-5 d-block">IT IS AN EXAMPLE TEXT</span>

<h2><a class="ml-5 mt-5 d-block" href="#">IT IS AN EXAMPLE TEXT IN HREF</a></h2>

And you can check in JSFiddle

I want first letter Upper, others lower for all words. Like this:

It Is An Example Text

Caliche

So you want what? The text - except for the initial letter (or the first letter) - to be lowercase? "...doesn't work" is not an adequate description of the problem; what exactly did you expect, what happened instead? – Eldridge

Edited question. Sory. – Caliche

This isn't something CSS can do - since the text is all uppercase already, so capitalising the first letter of each word makes no visual difference (this is probably by design, but it honestly feels like a bug), and there's no :word pseudo-class - is JavaScript a possibility, or does it have to be CSS only? – Eldridge

No it can be with javascript and php. @DavidThomas – Caliche

Answer 1

CSS text-transform: capitalize will only affect the first character.

According to the specs:

capitalize Puts the first character of each word in uppercase; other characters are unaffected.

I strongly suggest to just have the content edited. Remember that at the end of the day, technologies such as css is just 1 way to solve the problem. The better solution, again, would be to edit that content and capitalize it, whether it be stored in the database or just static content in the markup.

---

As a hack (if you really want to use a code-level solution), you can use JavaScript to transform all letters first into lowercase. Then use /\b(\w)/g to match the instances of first letters, then use toUpperCase() on each

document.querySelector("a").innerText = document.querySelector("a").innerText.toLowerCase().replace(/\b(\w)/g, x => x.toUpperCase());

<h2><a class="ml-5 mt-5 d-block" href="#">IT IS AN EXAMPLE TEXT IN HREF</a></h2>

Spacetime

Answer 2

Capitalize only affects the first letters of words. It will not change the case of the rest of the letters in a word. For example, if you capitalize a word that's in all capital letters already, the other letters in the word won't switch to lowercase. This is nice when your text includes an acronym or abbreviation that shouldn't include any lowercase letters.

If you change your provided text to lowercase, you will see it work just fine!

But to be answer complete, i will try to find a way to capitalize with the desired way no matter the input.

Seems it is not possible with CSS only, for something beside a single word text if you are not wrapping every word in a different element.

Single word snippet

span,
a,
h2 {
   text-transform:lowercase
}

span:first-letter,
a:first-letter,
h2:first-letter {
  text-transform: capitalize;
}

Lophophore

Answer 3

span,
a,
h2 {
  text-transform: lowercase !important;
}
span:first-letter,
a:first-letter,
h2:first-letter {
  text-transform: capitalize !important;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<span class="ml-5 mt-5 d-block">IT IS AN EXAMPLE TEXT</span>

<h2><a class="ml-5 mt-5 d-block" href="#">IT IS AN EXAMPLE TEXT IN HREF</a></h2>

Hanlon

It is possible to apply to all words? – Caliche

Answer 4

I edited their answer to apply capitalization to all the first letter of the first line.

span,
a,
h2 {
  text-transform: lowercase;
}
span:first-line,
a:first-line,
h2:first-line {
  text-transform: capitalize;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<span class="ml-5 mt-5 d-block">IT IS AN EXAMPLE TEXT</span>

<h2><a class="ml-5 mt-5 d-block" href="#">IT IS AN EXAMPLE TEXT IN HREF</a></h2>

Broadleaved

Elements must be displayed as block or inline-block for this to work. – Cosgrove

@Cosgrove your comment is simply the answer to this question! – Concentrated

UPDATE: There is a bug where this doesn't work in Safari and I had to resort to using JS. bugs.webkit.org/show_bug.cgi?id=3409 – Cosgrove

Answer 5

My solution is to use JavaScript and CSS together.

CSS :

#text { text-transform: capitalize} 

Javascript:

document.getElementById("text").innerHtml = document.getElementById("text").innerHtml.toLowerCase()

The JavaScript will first of all force everything to lowercase, then the CSS will apply the text-capitalize.

Ellingson

Answer 6

I think that you are looking for text-transform: uppercase;

As others mentioned, text-transform: capitalize only capitalizes the first letter of each word.

Uppercase on the other hand will render every letter capitalized.

Crocein

Answer 7

To expand upon @Mystery's answer. In reference to Why is ::first-line not working for span like p / div tags?

UPDATE: There is a bug where this doesn't work in Safari and I had to resort to using JS. https://bugs.webkit.org/show_bug.cgi?id=3409

As per MDN:

A first line has only meaning in a block-container box, therefore the ::first-line pseudo-element has only an effect on elements with a display value of block, inline-block, table-cell or table-caption. In all other cases, ::first-line has no effect.

Below is the extract from the W3C Spec: (Section 7.1.1 First formatted line definition in CSS)

In CSS, the ::first-line pseudo-element can only have an effect when attached to a block-like container such as a block box, inline-block, table-caption, or table-cell.

Since span elements are display: inline by default the ::first-line selector has no effect on it. If we change the display for the span to inline-block or block, it will work.

span,
a,
h2 {
    display: block;
    text-transform: lowercase;
}
span:first-line,
a:first-line,
h2:first-line {
    display: block;
    text-transform: capitalize;
}

Cosgrove

this worked for me. The text were all caps so css capitalise did not work. – Slump

Answer 8

Sometimes if you are working on Safari on a MacBook the first-line pseudo class doesn't work with uppercase letters. Safari doesn't have the writing support for that combination of pseudo class and text-transformation. Your CSS seems fine, it may just be that the CSS is not supported.

Whaler

Answer 9

Another reason why text-transform: capitalize will not work is cos white-space elimination whilst bundling for production may lead to a special case:

<span>this</span>
<span style="text-transform: capitalize">works</span>

<span style="padding-right:4px">doesn't</span><span style="text-transform: capitalize">work</span>

Am