For some reason, the ellipsis at the end of the text does not appear, and the text itself is transferred to a new line. How to remove it?

<div class="block"> <img src="https://cdn0.iconfinder.com/data/icons/195-flat-flag-psd-icons/70/Russia.png"> <a href="#russia">Российская Федерация</a> </div> .block { width: 200px; } .block img { position: relative; display: inline-block; width: 24px; height: auto; margin-right: 10px; } .block a { position: relative; cursor: pointer; overflow: hidden; display: inline-block; white-space: nowrap; text-overflow: ellipsis; width: 85%; vertical-align: middle; color: #507299; text-decoration: none; }

https://jsfiddle.net/mpg2d00o/2/

  • Hmm, my ellipsis appears and the text itself is NOT transferred to a new line ... - Ep1demic
  • @ Ep1demic in JSFiddle all clearly shown. - JamesJGoodwin
  • In fact of the matter! You write "For some reason the ellipsis does not appear at the end of the text, and the text itself is transferred to a new line." And I tell you that in my JSFiddle - everything is OK, the ellipsis APPEARS, and the text is NOT transferred. - Ep1demic
  • @JamesJGoodwin I also do not have dots, in which browser do you look? - Vadim Ovchinnikov
  • .block { max-width: 200px; width: 100%; } .block { max-width: 200px; width: 100%; } and it works - HamSter

1 answer 1

Add an image inside the link:

  <div class="block"> <a href="#russia"> <img src="https://cdn0.iconfinder.com/data/icons/195-flat-flag-psd-icons/70/Russia.png"> Российская Федерация </a> </div>

or add the outer div styles for circumcision and remove them from the link:

 overflow: hidden; white-space: nowrap; text-overflow: ellipsis;

but it turns out that you prohibit the transfer within the link, and the image is outside of it, and therefore the transfer occurs.