Css 使用内联块截断用户界面中的文本

我想截断文本，必须保持元素的对齐。要截断span中的文本，必须使用

display:inline block

。但是使用它会破坏用户界面

代码片段

HTML

---

预期的输出是将截断的文本与周围的

标记对齐。

正如@Fran所建议的，添加

垂直对齐：top

解决了这个问题

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

---

这方面的例子可见一斑。您可能会注意到，即使添加

vertical align:top

，也不会像第三个示例中那样真正对齐元素。但这是目前最接近的答案。

用户界面到底是如何破坏的？期望的UI结果是什么？不太清楚您要求的是什么。你能用图片显示吗？将

垂直对齐：top

添加到

.inline{}

似乎有效。@Fran是的。似乎“有点”有效，因为边界没有像第二次输出那样对齐。但我认为这是迄今为止最接近的一次。对其他人来说。更新的fiddle and question你可以在回答帖上写下你是如何解决的，而不是更新标题/问题，因为看不到解决方案对未来来这里寻求相同/类似问题解决方案的用户没有帮助。你也能够接受自己的答案，这些答案也解决了你的问题。

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

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