text-overflow:ellipsis; only works when the following are true: The element’s width must be constrained in px (pixels). Width in % (percentage) won’t work. The element must have overflow:hidden and white-space:nowrap set. The reason you’re having problems here is because the width of your a element isn’t constrained. You do have a width setting, but because … Read more
To clip text with an ellipsis when it overflows a table cell, you will need to set the max-width CSS property on each td class for the overflow to work. No extra layout div elements are required: td { max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } For responsive layouts; use the max-width CSS … Read more
There’s a way to do it using unofficial line-clamp syntax, and starting with Firefox 68 it works in all major browsers. body { margin: 20px; } .text { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; /* number of lines to show */ line-clamp: 2; -webkit-box-orient: vertical; } <div class=”text”> Lorem ipsum dolor sit amet, … Read more
Basically you have added more clutter in your code which is creating more confusion so first I try to remove clutter which hinders understanding the real issue. First of all we have to establish that what’s the real question? Its that why “inline-block” element is pushed downward. Now we start to understand it and remove … Read more
Add overflow:auto to your #page div. jsFiddle example And check out collapsing margins while you’re at it.