using inline-block to truncate text in span breaks UI

Question

I want to truncate the text and the alignment of the elements must be kept. And to truncate text in span, display: inline-block must be used. But using it breaks the UI.

JSFiddle Demo

Code Snippets

HTML

<a href="#">
<i class="fa fa-circle bordered"></i>
<span class="bordered inline">{{text}}</span>
<i class="fa fa-times bordered"></i>
</a>

CSS

.inline {
  max-width: 137px !important;
  text-overflow: ellipsis;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
}

Expected Output is to have the truncated text be aligned with the surrounding <i></i> tags.

How exactly does the UI break? What's the desired UI result? — Chris, Jan 16 '17 at 09:16
Not so clear what you are asking for. Could you show by a picture? — Nayana Adassuriya, Jan 16 '17 at 09:17
@Fran yeah. seems to 'kinda' work, since the borders are not aligned like in the 2nd output. But I think this is the closest one so far. to others. updated fiddle and question — Dev, Jan 16 '17 at 09:20
Could you the answer post how you solved it instead of updating the title/question as not seeing the solution is not helpful to future users coming here for a solution for the same/similar issue. You are also able to accept your own answers that solved your issue too. — Nope, Jan 16 '17 at 10:12

score 0 · Answer 1 · answered Jan 17 '17 at 02:48

As @Fran suggested, adding vertical-align: top fixes the issue.

.inline {
  max-width: 137px !important;
  text-overflow: ellipsis;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: top;
}

Examples can be seen on this JSFiddle Demo. You may notice that even adding vertical-align: top doesn't really align the elements like in the 3rd example. But it is the closest answer for now.

using inline-block to truncate text in span breaks UI

1 Answers1