开发者

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;}
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜