Get content to fit in a DIV? (font size/lineheigth/zoom etc)

Discussion in 'CSS' started by alfgeorg, Mar 8, 2008.

  1. #1
    If you have a DIV let say with size 300px(w) and 200px(h). You then put a text from a database in this DIV. If the text is to long to fit in the DIV is it possible to automatic reduce the font-size, line-heigth, zoom etc to get the content to fit in the DIV?

    I want to print the page so I cant use scrollbars, so I have to reduce the size of the content. I dont want to change the size of the DIV either. Just the content .... automatically/programmatically.
     
    alfgeorg, Mar 8, 2008 IP
  2. X.Homer.X

    X.Homer.X Peon

    Messages:
    290
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #2
    divs should automatically stretch to fit all the content inside of them, at least vertically anyway. i dont know about horizontally.
     
    X.Homer.X, Mar 8, 2008 IP
  3. alfgeorg

    alfgeorg Peon

    Messages:
    10
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    But I dont want the DIV to stretch, but reduce the content so the DIV still have its size.
     
    alfgeorg, Mar 8, 2008 IP
  4. X.Homer.X

    X.Homer.X Peon

    Messages:
    290
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #4
    then i dont think there is any way to auto adjust font size. You can set a <p> class for that particular div so its smaller, but it wont automatically do it. At least I donr think it will, but im no expert, so..
     
    X.Homer.X, Mar 8, 2008 IP
  5. softnmore

    softnmore Peon

    Messages:
    34
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #5
    u know we can handle css with javascript.
    now im giving u logic.

    - store a fixed height in a variable,
    - check the current height of the div.
    - compare with the fixed height,
    - if (current height) > (fixed height) then change the 'font-size'
    - do it until (current height) <= (fixed height).

    i think this logic will help u to make a javascript function.
    u need to call the function after loading the page. :)
     
    softnmore, Mar 8, 2008 IP
  6. X.Homer.X

    X.Homer.X Peon

    Messages:
    290
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #6
    wow never knew javasctipy could handle css. so it would be like

    $div-height
    get $current-height
    if $div-height > $current-height
    text-size 10

    cept do that in an array so that it continues until it fits. you are a smart one softnmore! :)

    Thank you for this knowledge.
     
    X.Homer.X, Mar 8, 2008 IP
  7. alfgeorg

    alfgeorg Peon

    Messages:
    10
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Thanks. I have just learned to find the actual height by offsetHeight, so I see now how to solve this. Maybe using a while {} to reduce the size in % until the content fit the height.
     
    alfgeorg, Mar 8, 2008 IP
  8. X.Homer.X

    X.Homer.X Peon

    Messages:
    290
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #8
    yeahhh that would probably be your best bet. Care to share the webpage in question? i always admire another web developers work, especially when you have a part of the description :p
     
    X.Homer.X, Mar 8, 2008 IP