大家好!

让我提出我的问题!

我有一张大桌子。单元格可以为空,或可以包含以下内容:

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

该表有些响应,单元格的宽度在不同的屏幕上可能有所不同,因此内容可以分为多行。我要实现的是在<span>之外的文本上进行缩进(如果有换行符)。像这样:

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


如果有必要,我也可以重组表,以也将括在<span> -s中,但是如果您有一个更聪明的解决方案,我会尽力而为。

最佳答案

您可以通过将“短文本”和“长文本”都放在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>

关于html - 强制跨度像列表指示器一样,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/47056031/

10-12 12:51
查看更多