Convert Uppercase Letter to Lowercase and First Uppercase in Sentence using CSS

by

There is no sentence caps option in CSS. The other answers suggesting text-transform: capitalize are incorrect as that option capitalizes each word.

Here’s a crude way to accomplish it if you only want the first letter of each element to be uppercase, but it’s definitely nowhere near actual sentence caps:

p {
  text-transform: lowercase;
}

p::first-letter {
  text-transform: uppercase;
}
<p>THIS IS AN EXAMPLE SENTENCE.</p>
<p>THIS IS ANOTHER EXAMPLE SENTENCE.
   AND THIS IS ANOTHER, BUT IT WILL BE ENTIRELY LOWERCASE.</p>

More Related Contents:

  1. How I change the color of table fonts/ contents with inline CSS [duplicate]
  2. Expand list when mouse click on list
  3. Difference between tag and the tag? [closed]
  4. Why does this inline-block element have content that is not vertically aligned
  5. How to line-break from css, without using ?
  6. How can I scale the content of an iframe?
  7. Maintain aspect ratio of div but fill screen width and height in CSS?
  8. Select dropdown with fixed width cutting off content in IE
  9. How to draw circle in html page?
  10. How can I make a CSS glass/blur effect work for an overlay?
  11. CSS – Make divs align horizontally
  12. Calculator keypad layout with flexbox
  13. How to exclude particular class name in CSS selector?
  14. How to position a div scrollbar on the left hand side?
  15. Difference between overflow-wrap and word-break?
  16. floating elements behavior
  17. Div width 100% minus fixed amount of pixels
  18. overflow:scroll; in
  19. Is there a disadvantage of using `display:table-cell`on divs?
  20. @Font-face not working on mobile
  21. How are `display: table-cell` widths calculated?
  22. How can I target a specific column or row in a CSS grid layout?
  23. How to create a triangle in CSS3 using border-radius
  24. Bootstrap 3 grid, does it *really* matter how many columns are in a row?
  25. Border around specific rows in a table?
  26. Making a div that covers the entire page
  27. Word wrap a link so it doesn’t overflow its parent div width [duplicate]
  28. Curved lines using only HTML and/or CSS
  29. Using cm/mm on the CSS of a web app that replicates paper interaction is a good practice?
  30. How to create chat bubbles like facebook Messenger

Leave a Comment