First letter Capitalize and other letters in lower case in css?
You could use text-transform
in order to make each word of a paragraph capitalized, as follows:
p { text-transform: capitalize; }
It's supported in IE4+. Example Here.
16.5 Capitalization: the 'text-transform' property
This property controls capitalization effects of an element's text.
capitalize
Puts the first character of each word in uppercase; other
characters are unaffected.
Making each word of an uppercase text, capitalized:
The following was under this assumption:
I want to make it look like:
This Is Sometext
You have to wrap each word by a wrapper element like <span>
and use :first-letter
pseudo element in order to transform the first letter of each word:
<p>
<span>THIS</span> <span>IS</span> <span>SOMETEXT</span>
</p>
p { text-transform: lowercase; } /* Make all letters lowercase */
p > span { display: inline-block; } /* :first-letter is applicable to blocks */
p > span:first-letter {
text-transform: uppercase; /* Make the first letters uppercase */
}
Example Here.
Alternatively, you could use JavaScript to wrap each word by a <span>
element:
var words = $("p").text().split(" ");
$("p").empty();
$.each(words, function(i, v) {
$("p").append($("<span>").text(v)).append(" ");
});
Example Here.
Making the first letter of an uppercase text, capitalized:
This seems to be what you are really looking for, that's pretty simple, all you need to do is making all words lowercase and then transforming the first letter of the paragraph to uppercase:
p { text-transform: lowercase; }
p:first-letter {
text-transform: uppercase;
}
Example Here.
Transform Uppercase Text to Lowercase, Except for first letter in CSS
One option is to use the first-letter
pseudo-selector.
div { text-transform: lowercase;}
div::first-letter { text-transform: uppercase;}
<div>PARROT</div>
Make the first character Uppercase in CSS
There's a property for that:
a.m_title {
text-transform: capitalize;
}
If your links can contain multiple words and you only want the first letter of the first word to be uppercase, use :first-letter
with a different transform instead (although it doesn't really matter). Note that in order for :first-letter
to work your a
elements need to be block containers (which can be display: block
, display: inline-block
, or any of a variety of other combinations of one or more properties):
a.m_title {
display: block;
}
a.m_title:first-letter {
text-transform: uppercase;
}
CSS Capitalize First Letter In All Caps Word
Yes it is possible with just CSS, here's how:
.capitalize { text-transform: lowercase; display: inline-block;}
.capitalize:first-letter { text-transform: uppercase}
<span class = "capitalize">TESTING</span>
Related Topics
How to Reset a CSS Variable (Aka Custom Properties) and Use the Fallback One
CSS Specificity and Inheritance
Bootstrap 3 Slide in Menu/Navbar on Mobile
Replace Input Type=File by an Image
Multiple Font-Weights, One @Font-Face Query
Webkit Backface Visibility Not Working
Transparent Rounded Corners on Google Map
How to Apply a CSS Transition to the Overflow Property
Are CSS3 ::Before and ::After Pseudo Elements Supported by IE9 or Not
How to Get "Position:Fixed" CSS to Work in IE 7+ with Transitional Doctype
Inverted' Border-Radius Possible
Browser Support for CSS :First-Child and :Last-Child
Why Can't I Animate Custom Properties (Aka CSS Variables)
Make CSS3 Triangle with Linear Gradient