Question 299963 in Html Question posted in
Some basic documentation can be found here.

Html – when we have written text in capital letter text-transform capitalize css not working correctly

I’m currently working on a project where I’ve applied the text-transform: capitalize; property to a specific class (div.c), but it doesn’t seem to be working as expected when the text is in all capital letters.
Here’s a snippet of the code:

<!DOCTYPE html>
<html>
<head>
<style>
div.c {
  text-transform: capitalize;
}
</style>
</head>
<body>
<h2>text-transform: capitalize:</h2>
<div class="c">THIS IS TESTING CONTENT</div>
</body>
</html>
Tags:

3

Answers


  1. 0

    We can’t apply capitalize when all letter are in uppercase

    You can almost do it with:

    .c {
  text-transform: lowercase;
}
.c:first-letter, .c:first-line {
  text-transform: uppercase;
}

    OR
    You can also do it with JavaScript

    Convert with JavaScript using .toLowerCase() and capitalize would do the rest.
    Login or Signup to reply.
  2. 0

    When you set text-transform: capitalize;, it capitalizes the first letter of each word in the text.

    if you have pre-written the text in capital letter than that "capitalize" will have no effect.

    Login or Signup to reply.
  3. 0

    span,
    a,
    h2{

    text-transform:lowercase

    }

    span:first-letter, a:first-letter, h2:first-letter
    {

    text-transform: capitalize;

    }

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search