CODEWITHSUNDEEP
htmlcss
Sagar Raj
Sagar Raj

Reputation: 939

Calculate number of letters and apply CSS

Guys this question is related to this one > Apply CSS to the words in a paragraph written in brackets (parenthesis)

As the databse is not in my control, i'm trying to find some alternatives. Is there a way in CSS to count the number of characters in a sentence and then apply CSS to the rest of the characters?

Upvotes: 3

Views: 10157

Answers (2)

Kudos
Kudos

Reputation: 1154

You'll need JavaScript to do that just use somestring.length like so:

var someString= 'abc';
var str = someString.length;
console.log(string);

Result: 3

Check this out for more info http://www.quirksmode.org/js/strings.html

or jQuery method is:

Html

<div id="selector">Some Text</div>

jQuery

$('#selector').text().length;

Upvotes: 0

zer00ne
zer00ne

Reputation: 43880

1ch = width of a "0" (zero)

1ex = height of an "x" (lower case)

ex seems more accurate. Like @BoltClock♦ said, it's not counting, but it's a way to limit the number of characters. I'd try to "do some CSS with the rest" but OP was not specific, and frankly, I have no idea.

Update

The best I can come up with is putting the remaining text in a :after and then style the content.

p.fifteen { max-width: 15ex; outline: 1px solid red; }
p.seventeen { max-width: 15ch; outline: 1px solid red; }
p.fifteen:after { content: 'fghijklmnop'; font-size: 36px; color: red; }
p.seventeen:after { content: 'hijklmnop'; font-variant: small-caps; font-weight: 900; }
<p class="fifteen">123456789abcde</p>
<p class="seventeen">123456789abcdefg</p>

Upvotes: 1

Related Questions