Is there a way to hide a partially shown div in JavaScript (or maybe using some CSS magic).
My setup has a fixed-width parent div with overflow: hidden
and white-space: nowrap
(so the divs don't flow onto the next line). Essentially, I don't want the children divs (of variable width and display: inline-block
) to go onto the next line if they overflow as it spoils the layout.
As the children divs have a variable width and don't break onto the next 'line' of divs, some of them are hidden from the view, and some only partially shown. If they are hidden, it's fine, but the partially shown divs look silly (they contain text, so sometimes it's half-shown).
The child divs are added programmatically with JS in response to realtime data, so I have no way of knowing how many will fit as their widths vary. I just want to hide those that flow over the edge of the div (overflow: hidden
) or are partially shown.
Is there an easy way to hide those partially shown divs? I don't really want to query the widths of the children divs as some other content needs to be refreshed a lot and I don't want to slow down the refresh with unnecessary DOM property queries.
<div style='overflow: hidden; white-space: nowrap; max-width: 500px'>
<div style='display: inline-block'> some text </div>
<div style='display: inline-block'> some text </div>
<div style='display: inline-block'> some text </div>
<div style='display: inline-block'> partially shown </div>
<div style='display: inline-block'> hidden </div>
<div style='display: inline-block'> hidden </div>
</div>