Grow your CSS skills. Land your dream job.

Overflow:Hidden Cutting of Text

  • # July 2, 2014 at 9:47 am

    Hi

    Overflow:hidden seems to be cutting of the text.

    See

    Click on the left Settings tab.

    # July 2, 2014 at 9:59 am

    That’s what it’s supposed to do: it hides everything that “overflows”.

    You’ve given the .side-menu-right block a height of 100%, AND overflow:hidden;. Result is that the block will be as high as its parent (in this case, the viewport) and everything that won’t fit in there, will not be shown.

    I’m sure you have your reasons for using overflow:hidden; this way, but not sure what else to say. It’s doing exactly what you’re telling it to do. You may want to change it to overflow:visible;?

    # July 2, 2014 at 10:01 am

    If the tab has a fixed height and the content height exceeds it then overflow:hidden is doing exactly what it is supposed to be doing.

    What would you like it to actually do?

    # July 2, 2014 at 11:17 am

    If you comment out the overflow:hidden and have a look at what happens to my black footer and right grey border. You will see the problem i am having. I thought i may have fixed it with overflow:hidden, but this is not the case.

    # July 2, 2014 at 11:36 am

    maybe just overflow-x. or learn about clearfixes.

    You might also be interested in alternatives to float layouts (floats are for floating content; they were never intended to be used as layout containers, sectioning, and so forth).

    # July 2, 2014 at 12:18 pm

    @un-traq-ed

    Huh? overflow-x would do nothing in this case. I am using clear:both before it reaches the footer.

    # July 2, 2014 at 1:33 pm

    Maybe I am misunderstanding your problem, but it seems to be solved by changing overflow:hidden to overflow-x:hidden in your .side-menu-right rules. » fiddle

    overflow: auto; also clears the footer.

    I see now that the column is also too wide —that’s because you have given .content-tabs and .content-tabs-info a set width of 793px. If you remove that, the width will be dictated by the content.

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

You must be logged in to reply to this topic.

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