Grow your CSS skills. Land your dream job.

random quote in a fixed size block

  • # March 26, 2013 at 5:13 am

    I have a script that pulls in random blockquote.
    The api is here
    http://quotesondesign.com/the-api/
    And the script running in js fiddle with my own css and container.
    http://jsfiddle.net/p3Tzm/

    As I have no idea how many lines of copy the biggest quote is,
    What I need it to do is have the font size scale down when the number of lines exceed the fixed height proportionately. But it also needs to scale up when its only a few words also.

    Here’s the code with a forced amount of text as an example to work with.
    http://jsfiddle.net/qqu9t/
    (id imagine it overflowing the container is part of the problem)

    I’ve used fit text js before but it only scales width. And I have seen the following post but similar but most do the same.
    https://css-tricks.com/forums/discussion/10851/is-it-possible-to-adapt-font-size-to-div-width
    I need the opposite.

    It needs to flow to the next line till it runs out of height then scale down and not flow outside the container or scroll. And not via viewport but a fixed div container.

    I should also mention, I can edit and understand most JS but I cant write it to save my life.

    Any ideas?

    Failing that working, the fallback would be to push the bottom of the container down and not allow text to overflow like its currently doing.

    # March 26, 2013 at 7:33 am

    I found this and it did look promising.
    http://jsperf.com/jquery-textfill/15

    It works great with static text.

    But it seems to conflict with the other script and css.
    http://jsfiddle.net/nyutD/582/

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".