Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

html

css

How to convert UPPERCASE letter to lowercase and first letter Uppercase for each sentences like below only by using CSS?

From: THIS IS AN EXAMPLE SENTENCE.

To: This is an example sentence.

Update: When I'm using text-transform: capitalize; The result still same.

like image 831
Hafizul Amri Avatar asked Dec 01 '10 08:12

Hafizul Amri


People also ask

How do you capitalize the first letter of a sentence in CSS?

You can capitalize the first letter of the . qcont element by using the pseudo-element :first-letter . This is the closest you're gonna get using only css. You could use javascript (in combination with jQuery) to wrap each letter which comes after a period (or comma, like you wish) in a span .

How do you change uppercase in CSS?

You can achieve CSS all caps by using the keyword “capitalize.” In addition, text-transform capitalize converts all the first letters in all words to uppercase. Other values you can use with text-transform include “none,” “lowercase,” “full-width,” and “full-size-kana.”

How do you make each word start with capital letters in CSS?

The text-transform CSS property specifies how to capitalize an element's text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized.


1 Answers

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> 
like image 175
BoltClock Avatar answered Sep 18 '22 19:09

BoltClock