html - CSS:跨度标签在同一行

Question

我有一个 h4 标签，里面有 4 个跨度，绑定(bind)到每个跨度标签的文本长度各不相同(跨度标签的宽度各不相同)。无论宽度如何，我怎样才能使 span 标 checkout 现在同一行？

<h4>
  <span class="spanclass">text 1</span>
  <span style="white-space: pre-wrap !important">:</span>
  <span class="spanclass">text 3</span>
  <span class="fa fa-pencil"></span>
</h4>

.spanclass {
  white-space: pre-wrap !important;
  display: inline-flex!important;
  word-wrap: break-word;
  word-break: break-all;
}

请帮忙，谢谢。

Answer 1

您只需要在标题元素上设置 white-space: nowrap 和 overflow: hidden:

h4 {
    white-space: nowrap;
    overflow: hidden;
}

演示: http://jsfiddle.net/z83wjao9/4/