April 15, 2018 at 7:01 pm #269864
Have been banging my head with this for too long, and need to ask for some advice…
I have to show a filename, with an “open in a new window” icon after it for WCAG purposes, however, for responsible purposes, I want the filename (text) to ellipsis when squashed, but the icon to always remain at the end of the layout…
Wide : | this_is_a_long_filename.jpg | icon|
Narrow: | this_is_a_lo… | icon |
Ive tried using tables (doesnt seem to work unless table is 100%) and div’s (which struggle to resize properly).
Here’s what I’ve been dabbling with unsuccessfully : https://jsfiddle.net/kylane/m76ens5d/31/
Any advice would be awesomely appreciated. Thanks!April 15, 2018 at 10:18 pm #269865
Everything you wrote in that jsfiddle seems to be completely fine. Just remove the inline css display: inline-block from the div inside .columnA class. I think it will start working.April 15, 2018 at 10:24 pm #269866
Thanks Mamun – sadly it doesn’t – I want its original size to match the content before its ellipsis’d, not 100% wide – and to ellipsis only when it squeezed by the parent container :(April 15, 2018 at 10:35 pm #269868
Well, then write the exact code on codepen so that I can modify your real code. I solved the problem where you show me that. Now put the original size of the content, original size of the table etc. You are very close I guess…April 15, 2018 at 11:51 pm #269869
In order to make the overflow ellipsis work, you need to specify the width or the max width in that container.
So just change your
max-width: 100%;and you have what you need. Or at least you have what I think you mean.April 16, 2018 at 1:59 am #269873April 16, 2018 at 3:36 am #269875
Thanks @Beverlyh – a much more elegant solution!
Thanks to others for their suggestions too!
You must be logged in to reply to this topic.