CODEWITHSUNDEEP
css
Tim
Tim

Reputation: 2649

Scaling text using CSS

What is and is there a way scale text using CSS based on the amount of text within a DIV.

I've this page I've created at http://www.directiongroup.com/tweethearts/ and the CSS for the text is (with a fixed size of 32px):

.jta-tweet-text

{
    color: #ed1c24;
    font-size: 32px;
    text-transform: uppercase;
    line-height: 30px;
    font-weight: normal;
    font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif;
    text-shadow: 0px 1px 0px #FFFFFF;
}

Many Thanks

Upvotes: 6

Views: 13298

Answers (4)

Jamie Dixon
Jamie Dixon

Reputation: 54021

You can't do this with CSS alone but you could do it with a bit of JavaScript.

Counting the number of characters in the text and setting the CSS font-size property as required.

Here's a quick example using jQuery: http://jsfiddle.net/pjByL/

$('.heart').each(function(){
var textLength = $(this).text().length
    if(textLength > 26)
    {
       $(this).css('font-size', '10px');
    }
});

Upvotes: 3

Elvn
Elvn

Reputation: 3057

This question is old but still showing up top in search results, so I'll post a modern answer.

If you spec your font-size in viewport (vw) units in your CSS, the font is automatically scaled without the use of javascript

CSS

font-size: 23vw;

For the detailed specification and other options, read the W3.org spec here.

Upvotes: 1

Muhammad Omar ElShourbagy
Muhammad Omar ElShourbagy

Reputation: 7078

EDIT: as answered by 'couzzi'

css for double height text and double width text in font style

Fiddle that includes all vendor prefixes for transform and transform-origin:http://jsfiddle.net/LTaAy/1/

HTML

  <p class="doubleWidth">DOUBLE WIDTH</p>
  <p class="doubleHeight">Double Height</p>
  <p class="doubleWidthandHeight">Double Width and Height</p>

CSS

p {
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
}
p.doubleWidth {
    -webkit-transform: scaleX(2);
    -moz-transform: scaleX(2);
}
p.doubleHeight {
    -webkit-transform: scaleY(2);
    -moz-transform: scaleY(2);
}
p.doubleWidthandHeight {
    -webkit-transform: scaleX(2) scaleY(2);
    -moz-transform: scaleX(2) scaleY(2);
}

Upvotes: 0

sandeep
sandeep

Reputation: 92873

You can't achieve that with css you have to use java script for this check this may that's help you

http://fittextjs.com/

Upvotes: 1

Related Questions