CODEWITHSUNDEEP
htmlcss
gkatai
gkatai

Reputation: 436

Place icon after a line with text-overflow ellipsis

I have a problem with text-overflow: ellipsis. I want to place an icon after the 3 dots, but the icon always appears on the next line (because of the display: block property). Is there any way to display the line like this?

enter image description here

My example fiddle and the css:

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

Upvotes: 11

Views: 11329

Answers (4)

Ricardo Gellman
Ricardo Gellman

Reputation: 1399

Separate it in container and row


div.container {
    width:170px;
}

div.icon, div.text {
    padding-right:5px;
}

div.icon {
    float:right;
}

div.row, div.text {
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

div.row {
    display:inline-block;
    max-width:100%;
}
<div class="container">
        <div class="row">
            <div class="icon">[icon]</div>
            <div class="text">Long text long text long text long text</div>
        </div>
</div>

Upvotes: 0

Richard Birley
Richard Birley

Reputation: 41

The problem with the above approaches is that when the text is shortened it leaves the icon at the end of the text span.

Setting a max-width here would add to the approaches mentioned above.

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

Upvotes: 4

Paulie_D
Paulie_D

Reputation: 115045

Wrap it all in another span and use inline-block instead of 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>

Upvotes: 3

Antiga
Antiga

Reputation: 2274

You could use inline-block instead and set the icon to position: absolute in order to always have it place where the last span ends.

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

.fa {
  position: absolute;
}

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

Upvotes: 5

Related Questions