Skip to content Skip to sidebar Skip to footer
Home / Css / Html

CSS Sentence Case

Post a Comment
Is there any way to format a 'SENTENCE CASE'? e.g. 'THIS IS SENTENCE 1. THIS IS SENTENCE 2. THIS IS SENTENCE 3. change to -> This is sentence 1. This is sentence 2. This is sen

Solution 1:

you can use id/class:first-letter property to achieve that.

Taken from the duplicate question mentioned above:

p {
    text-transform: lowercase;
}
p:first-letter {
    text-transform: uppercase;
}

Solution 2:

There are only three CSS properties.

text-transform: capitalize;
text-transform: lowercase;
text-transform: uppercase;

None of them is gonna output as you want. You can use lowercase text-transform and them use JavaScript to capitalize first word of each sentence.

Fiddle


Solution 3:

CSS can convert first letter of each word, but not first letter of each sentence. Probably you need to use Javascript here:

<html>
  <head>
    <script language="javascript">
<!--
function fixCapitalsText (text)
{
  result = "";

  sentenceStart = true;
  for (i = 0; i < text.length; i++)
  {
    ch = text.charAt (i);

    if (sentenceStart && ch.match (/^\S$/))
    {
      ch = ch.toUpperCase ();
      sentenceStart = false;
    }
    else
    {
      ch = ch.toLowerCase ();
    }

    if (ch.match (/^[.!?]$/))
    {
      sentenceStart = true;
    }

    result += ch;
  }

  return result;
}

function fixCapitalsNode (node)
{
  if (node.nodeType == 3 || node.nodeType == 4) // Text or CDATA
  {
    node.textContent = fixCapitalsText (node.textContent);
  }

  if (node.nodeType == 1)
    for (i = 0; i < node.childNodes.length; i++)
      fixCapitalsNode (node.childNodes.item (i));
}
// -->
    </script>
  </head>
  <body onload="fixCapitalsNode (document.body);">
    THIS IS FIRST SENTENCE.
    THIS IS SECOND SENTENCE.
    This Is Third Sentence.
  </body>
<html>

Solution 4:

You could use css text-transform:capitalize; property


Post a Comment for "CSS Sentence Case"