Within my HTML page, there are nested divs as follows:
div#given -- display: block
div#one -- display: table
div#two -- display: table-row
div#three -- display: block
div#four -- display: block
The #given div is provided by a third party and has a defined width, which may be altered through JavaScript.
On the other hand, #one, #two, #three, and #four have implied widths.
The #three div's stylesheet includes:
#three
{
overflow-y: hidden;
}
#three:hover
{
overflow-y: visible;
}
#four contains a large amount of text that exceeds the boundaries of #three, but remains hidden until #three is hovered over.
I aim to apply text-overflow: ellipsis; to #four, but this only works when white-space: nowrap; is set. Unfortunately, setting this property stretches both #three and
#four</code beyond the desired layout.<br>
As of now, the only solution I have found involves explicitly defining a width for <code>#four#given.
Is there a non-JavaScript method to achieve this?
To view the issue in action, refer to this fiddle: https://jsfiddle.net/zquL7sem/3/
I aspire to have the content within the red border end at the blue line with three dots indicating truncated text, without setting explicit widths for #three or #four.
Any assistance on this matter would be greatly appreciated.