css: capitalizing hard-coded uppercase text
I have co开发者_如何学运维ntent that is in uppercase ( that's the way it's persisted on the back end ) and I have to transform it into 'proper case'.
I'm finding out that 'text-transform:capitalize' doesn't work. I suspect there's no css based workaround for that either.
.text-test{
text-transform:capitalize;
} ... <h1 class="text-test">SOME UPPER CASE TEXT</h1>
Is my conclusion correct? Thanks
Capitalise won't work as it targets on the first letter of whatever you're targeting so the rest of the text won't be affected. You'll have to edit it in the HTML or maybe a jQuery solution can be found,
I care :)
CSS does not support sentence case conversion. Fix it in the server or you're going to have to use JavaScript to re-write the HTML.
See: How to give sentence case to sentences through CSS or javascript?
Title Case
String.prototype.toTitleCase = function() {
return this.replace(/\w\S*/g, function(t) {
return t.charAt(0).toUpperCase() + t.substr(1).toLowerCase();});
};
var s1 = "HELLO WORLD!";
alert(s1.toTitleCase());
output
Hello World!
This isn't as elegant as a solution that would say convert it to
Hello world!
However I'm sure you can use this as a start point.
Somewhat very (very) late, but can help others.
What about:
.text-test {text-transform: lowercase;}
.text-test::first-letter {text-transform:capitalize;}
精彩评论