Search code examples
htmlsentencecss

Change CAPS lock to Capitalize in CSS

I have a sentence coming in that is all in CAPs lock (and can't be changed). That sentence is part of a paragraph, using CSS only (or a little Jquery if you have to). How can I always get the result reliably and across most devices!

Note: I have looked at questions such as this, but they do not cover the multiple sentences factor.

Without change:

THIS IS THE FIRST SENTENCE. And this is the second, as it is from the server.

Desired result:

This is the first sentence. And this is the second...

The CSS I tried was this, but it doesn't work with multiple sentences.

 p { text-transform: lowercase;}
   p:first-letter {text-transform:capitalize}
Solution

  • Seems like a problem for jQuery. Check this answer for the entire-element capitalization, then you can parse the first sentence by using something like:

    var setval = $('#my_paragraph').html();
var firstSentence = setval.substring(0, setval.indexOf('.'));
firstSentence = toProperCase(firstSentence);
var theRest = setval.substring(setval.indexOf('.') + 1);
$('#my_paragraph').html(firstSentence + theRest);