Question

当我溢出-x时；将我的表格隐藏在一个最大宽度的容器中，它隐藏了右侧的溢出内容。但它希望它隐藏右侧的内容。在我的示例中，某些文本“（应隐藏）”将被隐藏，您将看到“短文本”

我尝试过 direction: rtl 和 position: absolute; right: 0 没有运气

<div class="box">
  <table>
    <tr>
      <td>howdy partner</td>
      <td><i>short text</i></td>
    </tr>
    <tr>
      <td>(should be hidden) how partner howdy partner</td>
      <td><i>short text</i></td>
    </tr>
    <tr>
      <td>howdy partner</td>
      <td><i>short text</i></td>
    </tr>
    <tr>
      <td>howdy partner</td>
      <td><i>short text</i></td>
    </tr>
  </table>
</div>

.box {
  background-color: #eee;
  padding: 20px;
  margin: 10px;
  max-width: 300px;
  text-align: right;
  overflow-x: hidden;
}

table {
  background-color: #ccc;
  white-space: nowrap;
}

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

谢谢：）

Answer 1

您可以将flex和direction添加为行反向

    .box {
     background-color: #eee;
     padding: 20px;
     margin: 10px;
     max-width: 300px;
     text-align: right;
     overflow-x: hidden;
     display: flex;
     flex-direction: row-reverse;
    }

溢出-x：隐藏;隐藏左侧，而不是右侧？

1 个答案: