CSS：同一行中的Span标签

Question

我有一个h4标签，其中我有4个跨度和每个span标签绑定的文本长度不同（span标签的宽度各不相同）。如何使span标签出现在同一行中，而与宽度无关？

<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/

Answer 2

将min-width添加到h4标记：

h4{
  min-width: 100px;
}

DEMO

或者你可以做这样的响应式设计与包装：http://jsfiddle.net/z83wjao9/2/

没有包装：http://jsfiddle.net/z83wjao9/3/

Answer 3

    h4 span .spanclass {
      float:left;
    }