Force capitalised input to title case in CSS using text-transform
text-transform: capitalize;
only modifies the first letter of each word, so if the first letter of a word is already capitalized, text-transform skips that word.
Example:
JoHN smith
will become JoHN Smith
There is no way to do title-casing using only CSS unless all of your words are all lowercase.
CSS text-transform capitalize on all caps
There is no way to do this with CSS, you could use PHP or Javascript for this.
PHP example:
$text = "ALL CAPS";
$text = ucwords(strtolower($text)); // All Caps
jQuery example (it's a plugin now!):
// Uppercase every first letter of a word
jQuery.fn.ucwords = function() {
return this.each(function(){
var val = $(this).text(), newVal = '';
val = val.split(' ');
for(var c=0; c < val.length; c++) {
newVal += val[c].substring(0,1).toUpperCase() + val[c].substring(1,val[c].length) + (c+1==val.length ? '' : ' ');
}
$(this).text(newVal);
});
}
$('a.link').ucwords();
How to apply Title Case in input box through css
You can do like following way using css. This will work for all word.
input { text-transform: capitalize;}::-webkit-input-placeholder { text-transform: none;}:-moz-placeholder { text-transform: none;}::-moz-placeholder { text-transform: none;}:-ms-input-placeholder { text-transform: none;}
<input type="text" placeholder="test" />
How to convert UPPERCASE text to Title Case using CSS
The bad news is that there is no such thing as text-transform : title-case
which would guarantee the result to be title cased. The good news is that there IS a way to do it, which doesn't require javascript (as is often suggested for this situation). If you are writing a theme for a CMS you can use strtolower() and ucwords()
to convert the relevant text to title case.
BEFORE (THIS DOESN'T WORK):
<style>
.title-case{ text-transform:capitalize; }
</style>
<span class="title-case">ORIGINAL TEXT</span>
AFTER:
<?php echo ucwords( strtolower('ORIGINAL TEXT') ); ?>
If you are writing a theme, you'll probably be working with variables instead of text strings, but the function and the concept work the same way. Here's an example using the native Wordpress function get_the_title() to return the page title as a variable:
<?php
$title = get_the_title();
$title = strtolower($title);
$title = ucwords($title);
<h1>
<?php echo $title;
</h1>
?>
Hope this helps someone. Happy coding.
Why Css text-transform capitalize not working?
CSS text-transform: capitalize
will only affect the first character.
According to the specs:
capitalize
Puts the first character of each word in uppercase; other characters
are unaffected.
I strongly suggest to just have the content edited. Remember that at the end of the day, technologies such as css
is just 1 way to solve the problem. The better solution, again, would be to edit that content and capitalize it, whether it be stored in the database or just static content in the markup.
As a hack (if you really want to use a code-level solution), you can use JavaScript
to transform all letters first into lowercase. Then use /\b(\w)/g
to match the instances of first letters, then use toUpperCase()
on each
document.querySelector("a").innerText = document.querySelector("a").innerText.toLowerCase().replace(/\b(\w)/g, x => x.toUpperCase());
<h2><a class="ml-5 mt-5 d-block" href="#">IT IS AN EXAMPLE TEXT IN HREF</a></h2>
Capitalize first letter of sentences CSS
You can capitalize the first letter of the .qcont
element by using the pseudo-element :first-letter
.
.qcont:first-letter{
text-transform: capitalize
}
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
. You could add the same css as above to that span
. Or do it in javascript all together.
Here's a snippet for the css approach:
.qcont:first-letter { text-transform: capitalize}
<p class="qcont">word, another word</p>
Most efficient way to turn all caps into title case with JS or JQuery?
You could match consecutive word characters, and use a replacer function to replace with the first character (as-is), followed by the rest with toLowerCase()
called on them:
const text = 'THIS IS MY STRING WHY AM I YELLLING?';const output = text.replace( /(\w)(\w*)/g, (_, firstChar, rest) => firstChar + rest.toLowerCase());console.log(output);
Convert Uppercase Letter to Lowercase and First Uppercase in Sentence using CSS
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>
Related Topics
How to Set The Width of Webkit-Scrollbar-Thumb
How to Turn an Entire Webpage to Grayscale Using CSS
Override Bootstrap Container Width
Max-Height and Max-Width with CSS Only
Bootstrap 3.0 Affix with List Changes Width
How to "Snap to Pixel" After a CSS Translate
How to Center a Button in Material-Ui
What Does The 'P-N' and Its Variants Represent in Bootstrap V4
Min-Width for Column in Bootstrap Grid System
Reactjs How to Use Ref Inside Map Function
How to Add Image Background to Btn-Default Twitter-Bootstrap Button
Background Center with Chrome (Bug)
CSS Width 100% Including Overflow
Bootstrap 3.0 - Vertically Align 3 Panels in The Same Row (Auto Height)