使用内联块截断跨度中断UI中的文本

Question

我想截断文本，必须保留元素的对齐方式。要截取跨度中的文本，必须使用display: inline-block。但使用它会打破用户界面。

JSFiddle Demo

代码段

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;
}

预期输出是将截断的文本与周围的<i></i>标记对齐。

Answer 1

正如@Fran建议的那样，添加vertical-align: top可以解决问题。

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

可以在此JSFiddle Demo上看到示例。您可能会注意到，即使添加vertical-align: top也没有像第3个示例中那样对齐元素。但它现在是最接近的答案。