CODEWITHSUNDEEP
htmlcss
Sai Satwik Kuppili
Sai Satwik Kuppili

Reputation: 175

Move icon along with the text and should get fix after when the text is truncated with text-overflow ellipsis

I have a text and an icon. The icon should be sticky to the text till a particular length of the text and thereafter the text should be truncated with ellipsis but the position of the icon should be fixed.

This question is something similar to Place icon after a line with text-overflow ellipsis but when the length of the text is small, the icon should be along with the text.

Code fiddle and css:

.title {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
  width: 200px;
}

.fa {
  position: absolute;
}

With this code, when the length of the string is less than 200px, icon is not sticking to the text which not be in my case like shown in the image.

Sample Output image:

enter image description here

When the string length is less than 200px, icon should be sticky to the text and when it is more than 200px text should get truncated with ellipsis and icon should appear after the ellipsis.

Upvotes: 1

Views: 363

Answers (1)

Ambrish Pathak
Ambrish Pathak

Reputation: 3968

Instead of width use max-width

max-width: 200px;

See the fiddle here: https://jsfiddle.net/fqv2k73m/

Upvotes: 2

Related Questions