html - 在没有 rtl 的表中将文本溢出到左侧

Question

我有一个表，我正试图使它的行为或多或少像 Excel。我已经成功地让左对齐的单元格溢出到右边的单元格中(通过将它们的上下文放在一个包装 div 中，其中包含 max-width、overflow:visible 和 white-space:nowrap) 但我没有成功使右对齐的单元格溢出到左边。我试过将包装器 div 向右浮动(以及它的各种排列)但没有成功；无论如何，文本总是向右溢出。

StackOverflow 和其他地方对这个问题的其他答案建议使用 dir:rtl，但我真的不想这样做。我事先不知道哪些单元格会溢出，我也不想处理它对标点符号所做的古怪事情。

如果您还可以弄清楚如何使居中对齐的单元格平均溢出到两个相邻单元格中，则加分。

编辑:这是一个示例 jsfiddle:http://jsfiddle.net/AlexGodofsky/2uaHN/2/

Answer 1

我在研究同一个问题时发现了您的问答:让表格单元格内的文本右对齐并向左溢出。

我非常同意你不使用 dir:rtl 的观点，例如在 this SO answer .除了关于标点符号的实际缺点:dir 不是这个问题的意思!

在your solution ，高度问题是由内部div的绝对定位引起的:它被放置在流之外，因此不占用高度。

我确实得到了“右对齐”来使用 float ，我很高兴在这里与可能需要它的任何人分享这个最小的例子。对于中心案例，我还有一个“奖励”解决方案。

td {
  width: 8em;
  max-width: 8em;
  border: 1px solid #000;
}
div.fix_right {
  float: right;
  white-space: nowrap;
  text-align: right;
  overflow: visible;
  background-color: #ddd;
  /* and to obscure the contents of the cell on the left: */
  position: relative;
}
div.fix_center_a {
  position: relative;
  left: 50%;
  display: inline-block;
}
div.fix_center_b {
  position: relative;
  display: inline-block;
  margin-left: -50%;
  white-space: nowrap;
  /* and to obscure the contents of the cell on the left: */
  background-color: #ddd;
}

<table>
  <tr>
    <td>some text here</td>
    <td>
      <div class="fix_right">align right</div>
    </td>
    <td>some text here</td>
  </tr>
  <tr>
    <td>some text here</td>
    <td>
      <div class="fix_right">do align and overflow right</div>
    </td>
    <td>some text here</td>
  </tr>
  <tr>
    <td>some text here</td>
    <td>
      <div class="fix_center_a">
        <div class="fix_center_b">centered text, extending to the left and right</div>
      </div>
    </td>
    <td>some text here</td>
  </tr>
</table>

右对齐

我认为这个解决方案的关键是在 div 中使用 float 和 中的 max-width 的组合TD.

为了让内容“模糊”左侧列的内容，需要相对定位和 bg-color。如果这些左列无论如何都是空的，则甚至不需要。

居中

这个解决方案(不幸的是)需要一个额外的非语义 div 层，但它的工作原理如下:

• td 保持不变，因此它可能会出现边框等。请注意，边框表明单元格本身并未扩展，只有内容溢出了它。

• 第一个 div (fix_center_a) 将我们置于单元格中间，并为我们提供了内容所需的总宽度。

• 第二个 div (fix_center_b) 只是将内容向左移动总宽度的 50%(从 fix_center_a) ，从而使内容居中。

(由于第一个div的相对定位，如果在fix_center_b上应用background-color，内容已经遮挡了左右单元格的内容.)