Skip to main content


This topic contains 6 replies, has 4 voices, and was last updated by  kylane 11 months, 1 week ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • #269864


    Hi guys,

    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…

    Kinda like…

    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 :

    Any advice would be awesomely appreciated. Thanks!



    Hey Kylane,

    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.



    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 :(



    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…



    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 min-width: 100%; to max-width: 100%; and you have what you need. Or at least you have what I think you mean.



    I imagine you mean something like this



    Thanks @Beverlyh – a much more elegant solution!

    Thanks to others for their suggestions too!

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star