I have encountered an issue where I need to hide text with ellipsis, but it isn't working properly when there is a background image in a div before the text. You can see the problem demonstrated here: https://jsfiddle.net/ypbgkrod/6/
.block {
display: flex;
margin-top: 0.3em;
}
.summary-content {
margin-left: 0.2rem;
width: 100%;
}
.summary-content .description {
overflow: hidden;
width: 100%;
}
.ellipsis {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}<div class="block">
<div class="thumbnail">
<div class="thumb" role="img" style="background-image: url(''); height: 73px; width: 130px;"></div>
</div>
<div class="summary-content" data-permlink="i-want-more-of-my-life">
<div class="description">
<p class="ellipsis">Some random text that is long, long…Some random text that is long, long…Some random text that is long, long…Some random text that is long, long…</p>
</div>
<div class='slider'>
Need this to not overflow hide. Need this to not overflow hide. Need this to not overflow hide.
</div>
</div>
</div>By removing the <div class="thumbnail"> section, the text ellipsis and overflow hidden features work as expected. However, I am still facing issues with the slider not being displayed properly.
In summary, the issue arises from attempting to display a pop-up div with a slider that needs to extend beyond the overflow of the .block div. I tried various solutions such as removing overflow hidden on the .summary-content div, which allows the slider to be fully visible but prevents the ellipsis effect from functioning correctly.
Please refer to the original code snippets provided for a clearer understanding of the problem and attempted solutions. Your assistance in resolving this issue by ensuring the overflow on the ellipsis text is hidden while the slider remains visible would be greatly appreciated.
Thank you!