强制跨度充当列表指示器

Question

嘿，伙计们

让我提出我的问题！

我有一张大桌子。单元格可以是空的，也可以包含以下内容：

<span>[short text]</span> longer text

该表在一定程度上具有响应性，不同屏幕上的单元格宽度可能不同，因此内容可以分解为多行。我想要实现的是在<span>之外缩进文本，如果它有换行符的话。类似这样的东西：

[short text] longer text, which is
broken into two lines

如果有必要的话，我可以重组表格，把"长文本"也放在<span>-s中，但如果你有一个更聪明的解决方案，我会做的。

Answer 1

您可以将"短文本"one_answers"长文本"都放在span中，并将它们都显示为table-cells:

td {
width: 200px;
border: 1px solid black;
}
td>span {
display: table-cell;
border: 1px solid red;
}
td>span:first-of-type {
white-space: pre;
}

<table>
<tr>
<td>
<span>short text</span>
<span>long text  long text  long text  long text  long text  long text  long text  long text  long text  long text  long text </span>
</tr>
</table>

Answer 2

也许您可以使用2div而不是

<tr><td>
<div id=short style='float:left'>[short text]</div>
<div id=short style='float:left'>[long text]</div>
</td>
</tr>

Answer 3

如果可以使用<div>而不是<span>。word-break: break-all;可能是一个不错的选择。

td div {
width: 100px;
height: 300px;
}
.wordwrap {
word-break: break-all;
}

<table border="1">
<tr>
<td>
<div class="wordwrap">
asfasfafafsafafasfasfafafasfadvaavasdvavdvsavsvasvsvs
</div>
</td>
<td>
<div class="wordwrap">test</div>
</td>
</tr>
</table>