使第二个跨度包裹在自身下方，而不是第一个

Question

你好我有这个代码

<div class="test">
    <span class="first-span">first span</span>
    <span class="second-span">some long long long long text</span>
</div>

用css

.test{
    width:150px;
    margin:10px
}
.first-span{
    border:1px solid red;
}
.second-span{
    border:1px solid blue
}​

JSFIDDLE LINK

现在你们都可以在小提琴中看到第二个跨度中的“长”字是包装并且在“第一个”字下面。但我需要的是“长”应该在“一些”字样下面。

这有可能吗？

Answer 1

这是跨越工作的方式，或所有“内联”元素。为了解决这个问题，我们可以display: block; float: left;浮动：左边使得跨度只占用所需的空间。

Working demo here

Answer 2

如何将display用作表格？

.test {
  display: table;
}

.test span {
  display: table-cell;
  width: 100px;
  border: 1px solid #333;
}

.test .first-span {
  width: 100px;
}

<div class="test">
  <span class="first-span">first span</span>
  <span class="second-span">some long long long long text</span>
</div>

Answer 3

有更好的方法，但只是向左浮动第一个跨度就可以了解

.first-span{
    border:1px solid red;
    float:left;
    display:block;
}