The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Seeking HTML/CSS solution to layout problem

  • This topic is empty.
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)
  • The forum ‘CSS’ is closed to new topics and replies.