0

I want to create a responsive button that has a title and a leading icon. What I want to do is, when the viewport is decreasing, detect when the text starts to get truncated, at which point I would like to remove the title altogether and leave just the icon.

  • Can this be done with CSS alone?
  • If not, can this be done with JavaScript?
artooras
  • 6,315
  • 9
  • 45
  • 78
  • While this could be done with javascript, there is a CSS only way with certain restrictions. You could use [media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries) to pick a minimum view port width from where button labels will be visible or hidden. This is not taking into account the "event" of when a text is actually starting to get truncated. – Nico O Oct 25 '16 at 15:14
  • @NicoO, I want to avoid this option because I may have buttons with different length titles, which is why I wanted to see if there's a flexible solution. – artooras Oct 25 '16 at 15:18
  • looks like this already answered question could help you: http://stackoverflow.com/questions/143815/determine-if-an-html-elements-content-overflows – kaosmos Oct 25 '16 at 15:28

0 Answers0