Results 1 to 2 of 2

Thread: Fit headline (or span) of text onto one line and resize based on container width

  1. #1
    Join Date
    Apr 2011
    Seattle, WA

    Exclamation Fit headline (or span) of text onto one line and resize based on container width

    Ok, so I have a div that has a few lines of text (all separate items) that need to be about 96% wide and fit inside that div. The containing div is dynamic, with a width based on a percentage of the window size. Resizing the window should re-size the text. I have short entries (for example, "Smith" etc) and long entries (for Example "Smith & Sons, Co." etc) and they all need to be on a single line and fairly sized.

    There should be a minimum and maximum size allowed and if the minimum causes a problem it should not wrap the text...

    I could do something similar to this with a complex set of media queries in CSS, but I hear it's much easier with JavaScript or jQuery. (jQuery is installed already, btw)

    Any help would be greatly appreciated.

  2. #2
    Join Date
    Mar 2009
    Wherever i lay my hat

    See if this is anything like you wanted. I understand, that you are not very familiar with jQuery, but it works really simple:

    I used paragraphs, so i had to float them to adapt to content width. Then, with jQuery, i get all the paragraphs and increment their font-size until they are as wide as the container.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center