强制跨度像列表指示器一样

Question

嘿伙计们！

让我提出我的问题！

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

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

此表有些响应，单元格的宽度可能会因屏幕不同而异，因此内容可以分为多行。我想要实现的是在<span>之外缩进文本，如果它有换行符。像这样：

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

如果有必要，我可以对表进行重组，将“长文本”括在<span> - s中，但如果你有更聪明的解决方案，我会接受它。

Answer 1

你可以通过输入＆＃34;短文本＆＃34;和＃34;长文＆＃34;在span中同时显示table-cells：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

也许你可以使用2 div代替

<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;可能是个不错的选择。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;