html - 垂直对齐具有多个跨度的 div 内的多行文本

Question

我有以下 html 和 css 代码片段

<div class="table">
 <div class="table-cell">
  <span class="span"> A </span>
  <span class="span"> B </span>
  <span class="span"> C <br> D something something something </br> </span>  
 </div>
</div>

.table {
 display: table;
 width: 50%;
}

.table-cell {
 display: table-cell;
 width: 20%;
}

.span {
 float: left;
}

那个输出

ABC 
  D something something something` 

现在，如果我在第二行添加另一个 something，输出将是:

AB 
C 
D something something something something

虽然我的预期输出是:

ABC 
  D something something something
  something

这意味着当内容达到宽度限制时，我不希望将 C 移动到另一行。有谁知道我该如何实现(很明显我不想增加宽度)？

下面是代码，如果你想玩的话: https://jsfiddle.net/Lhqqcfs4/

Answer 1

您可以通过以下方式进行，希望对您有所帮助:

.table {
 display: table;
 width: 50%;
}

.table-cell {
 display: table-cell;
 list-style-type: none;
 width: 20%;
}

.span {
 float: left;
}
.col01 {
 display: block;
 overflow: hidden;
}

<div class="table">
 <div class="table-cell">
  <span class="span"> A </span>
  <span class="span"> B </span>
  <span class="col01"> C <br> D something something something <br/> </span>  
 </div>
</div>