CSS：同一行中的Span标签

Question

我有一个h4标签，其中我有4个span，绑定到每个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 white-space: nowrap overflow: hidden在标题元素上：

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

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

Answer 2

将最小宽度添加到h4标签：

h4{
  min-width: 100px;
}

DEMO

或者，您也可以像这样通过包装进行响应式设计： http : //jsfiddle.net/z83wjao9/2/

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

Answer 3

    h4 span .spanclass {
      float:left;
    }