Change CAPS lock to Capitalize in CSS

Question

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}

Answer 1

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);

Answer 2

This only a hotfix. If your output ever changes to something different, containing more then only a single dot or even other words starting with an uppercase character, this code will not provide the desired result.

Example: http://jsfiddle.net/Em2bD/

// grab your text
var firstSentenceText = $('p').text();

// extract the first sentence and make it all lowercase
var firstSentence = firstSentenceText.substr(0, firstSentenceText.indexOf('.')).toLowerCase();

// convert first char to uppercase
var result = firstSentenceText.charAt(0).toUpperCase() + firstSentence.substring(1);

// append the text to what ever you like and append the missing dot.
$('.result').text(result + '.');

Answer 3

Something that comes in mind is by using a bit of jquery. You can find the first period(.) in the paragraph and then you can make the string before it lowercase(you can give it a span with a class/id and have the rules already on css file). You may have to do a bit of googling.