Place icon after line with text overflow ellipse

I have a text overflow problem: ellipsis. I want to put the icon after three dots, but the icon is always displayed on the next line (due to the display: block property). Is there any way to display this line?

enter image description here

My fiddle and css example :

.title {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  display: block;
  width: 200px;
}
+4
source share
2 answers

Instead, you can use inline-blockand set the icon to position: absoluteto always have a place where the last one ends span.

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

.fa {
  position: absolute;
}

See here: https://jsfiddle.net/27rov6qn/1/

+4
source

span inline-block block

.title {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
  width: 200px;
  vertical-align: middle;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<span>
  <span class="title">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</span>

<i class="fa fa-home fa-fw"></i>

</span>
Hide result
+2

Source: https://habr.com/ru/post/1626223/


All Articles