Is it possible to un-capitalize text with CSS, and then re-capitalize it?

Question

I have a piece of text coming to me from an external source that is ALL CAPS. I want it to be simply capitalized at the first letter. Seems that text-transform:capitalize won't uncapitalize the rest of the word. Any way to do this without JS?

Capitalize **every** word in your text or just the **first** one? — Robert Koritnik, Feb 13 '11 at 15:24

score 7 · Answer 1 · answered Feb 13 '11 at 14:54

7

Something like this? http://jsbin.com/agocu3/2

css

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

html

<p>YOUR TEXT GOES HERE</p>

answered Feb 13 '11 at 14:54

Sotiris

38,986
11
53
85

This is not what `capitalize` does: "Transforms the first character of each word to uppercase". This will only transform the first letter of the paragraph. – kapa Feb 13 '11 at 14:59
As you can see he transforms the text to lowercase first and then selects the first letter and capitalizes it. Click on the example he gave or look at this: http://jsfiddle.net/Shaz/fbzr3/ – Shaz Feb 13 '11 at 16:58
The first letter of the first word, but not the other words of the string. So it doesn't work. – alcoceba Jul 25 '18 at 07:39

score 2 · Answer 2 · answered Feb 13 '11 at 14:59

2

You can put the text in lowercase and then use the pseudo selector :first-letter to uppercase the first letter

p {
    text-transform: lowercase;
}

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

answered Feb 13 '11 at 14:59

nunopolonia

14,157
3
26
29

score 0 · Answer 3 · answered Dec 13 '13 at 15:19

If you are using a server side language:

Do lowercase using server-side language to the text you want to capitalize and then use css property on that element to capitalize.

This is how it worked for me:

Server Side language: VB.net Inside a repeater - data coming from Database

<span class="capitalize"><%# Eval("RecipientFirstName").ToString.ToLower()%></span>

Converted into lowercase

CSS

.capitalize{
    text-transform: capitalize;
}

score 0 · Answer 4 · answered Feb 13 '11 at 14:58

0

Don't use CSS just use this:

http://www.convertcase.net/

Much cleaner and a lot of processing taken off the browser.

answered Feb 13 '11 at 14:58

Myles Gray

8,711
7
48
70

why use a service when you can do it through css? also, just **in case** they have an api, it still would take a lot of time to send text and get it back, process the response and display it, nullifying your premise of reducing the processing load. – kumarharsh May 08 '14 at 07:10

Is it possible to un-capitalize text with CSS, and then re-capitalize it?

4 Answers4

Linked