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

您可以通过以下方式完成此操作，希望有所帮助：

＆＃13;

.table {
 display: table;
 width: 50%;
}

.table-cell {
 display: table-cell;
 list-style-type: none;
 width: 20%;
}

.span {
 float: left;
}
.col01 {
 display: block;
 overflow: hidden;
}

＆＃13;

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

＆＃13;

Answer 2

您是否动态输入此表格信息？（即为什么不只是在内容中添加另一个install移动到下一行？）

或者，尝试给出跨度设定宽度;这会强制文本到下一行。

jsfiddle：https://jsfiddle.net/Lhqqcfs4/1/

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

2 个答案: