Question

原谅我，如果我在高度和宽度上有点疯狂（我只是随意尝试的东西）。

检查出来：

Create and display mutator directly
mf1: before=Optional(1.1000000000000001), after=Optional(199.09999999999999) @ 0x00007ffd38f82730
mf2: before=Optional(2.2000000000000002), after=Optional(299.19999999999999) @ 0x00007ffd38f82708
mf3: before=Optional(3.2999999999999998), after=Optional(299.19999999999999) @ 0x00007ffd38f826e0
-
In createMutators function ...
mf1=Optional(1.1000000000000001) @ 0x00007ffd38f82288
mf2=Optional(2.2000000000000002) @ 0x00007ffd38f82260
mf3=Optional(3.2999999999999998) @ 0x00007ffd38f82238
-
Display mutator returned by function
mf1: before=Optional(4.9406564584124654e-324), after=Optional(10.0) @ 0x00007ffd38f82288
mf2: before=Optional(6.9527664311957093e-310), after=Optional(10.0) @ 0x00007ffd38f82260
mf3: before=nil, after=Optional(nan) @ 0x00007ffd38f82238

这接近我想要的。工作台宽度是固定的（在这种情况下为100），并且工作台高度是固定的。文本保留在单元格内而不会溢出。但是，文本不会在底部对齐。

很好，让我们删除每个文本周围的div标签（这就是我用来处理溢出的内容）：

https://jsfiddle.net/9qpaLn5a/

<body style="padding-top: 0px; padding-left: 10px; padding-right: 10px; margin: 0px; overflow-y: scroll; overflow-x: hidden; background-color: white;">
    <table style="width: 100px; height: 100px;">
        <tr style="width: 100px; height: 100px;">
            <td style="vertical-align:bottom; text-align:center; border-style: solid; width: 45%; height: 100px;">
                <div style="height: 100px; overflow:hidden">
                    just some text.
                </div>
            </td>
            <td style="vertical-align:bottom; text-align:center; border-style: solid; width: 10%; height: 100px;">
                <div style="height: 100px; overflow:hidden">
                    some more text, just a little bit more than the other cell. I'm looking for some overflow to this thing.
                </div>
            </td>
            <td style="vertical-align:bottom; text-align:center; border-style: solid; width: 45%; height: 100px;">
                <div style="height: 100px; overflow:hidden">
                    just some text.
                </div>
        </tr>
    </table>
</body>

好吧，一旦删除div标签，表格会扩展到文本的高度（因此不再固定为100px）。

第一个链接（＃1）处理溢出，但我无法在单元格的底部对齐文本。

第二个链接（＃2）处理溢出 - 因为它不会成为任何 - 因为它增加了表的高度。

我似乎无法将两者结合起来。有什么想法吗？

谢谢。

Answer 1

这实际上完全可以通过flexbox的强大功能实现！只需执行两次尝试中的第一次，然后将以下内容应用于容器div：

display: flex;
align-items: flex-end;

＆＃13;

<body style="padding-top: 0px; padding-left: 10px; padding-right: 10px; margin: 0px; overflow-y: scroll; overflow-x: hidden; background-color: white;">
  <table style="width: 100px; height: 100px;">
    <tr style="width: 100px; height: 100px;">
      <td style="vertical-align:bottom; text-align:center; border-style: solid; width: 45%; height: 100px;">
        <div style="height: 100px; overflow:hidden; display:flex; align-items:flex-end;">
          just some text.
        </div>
      </td>
      <td style="vertical-align:bottom; text-align:center; border-style: solid; width: 10%; height: 100px;">
        <div style="height: 100px; overflow:hidden; display:flex; align-items:flex-end;">
          some more text, just a little bit more than the other cell. I'm looking for some overflow to this thing.
        </div>
      </td>
      <td style="vertical-align:bottom; text-align:center; border-style: solid; width: 45%; height: 100px;">
        <div style="height: 100px; overflow:hidden; display:flex; align-items:flex-end;">
          just some text.
        </div>
    </tr>
  </table>
</body>

＆＃13;

我还创建了这个here的小提琴。

如果您希望中间列溢出底部，只需将align-items: flex-end替换为中间列上的align-items: flex-start，如下所示：< / p>

＆＃13;

<body style="padding-top: 0px; padding-left: 10px; padding-right: 10px; margin: 0px; overflow-y: scroll; overflow-x: hidden; background-color: white;">
  <table style="width: 100px; height: 100px;">
    <tr style="width: 100px; height: 100px;">
      <td style="vertical-align:bottom; text-align:center; border-style: solid; width: 45%; height: 100px;">
        <div style="height: 100px; overflow:hidden; display:flex; align-items:flex-end;">
          just some text.
        </div>
      </td>
      <td style="vertical-align:bottom; text-align:center; border-style: solid; width: 10%; height: 100px;">
        <div style="height: 100px; overflow:hidden; display:flex; align-items:flex-start;">
          some more text, just a little bit more than the other cell. I'm looking for some overflow to this thing.
        </div>
      </td>
      <td style="vertical-align:bottom; text-align:center; border-style: solid; width: 45%; height: 100px;">
        <div style="height: 100px; overflow:hidden; display:flex; align-items:flex-end;">
          just some text.
        </div>
    </tr>
  </table>
</body>

＆＃13;

修改：

请记住，Internet Explorer在处理表格时非常糟糕，并且不会考虑基于百分比的宽度。解决此问题的最佳方法是设置与相关宽度等效的基于像素的 max-width 。这将强制浏览器不扩展您的单元格：

＆＃13;
＆＃13;
<body style="padding-top: 0px; padding-left: 10px; padding-right: 10px; margin: 0px; overflow-y: scroll; overflow-x: hidden; background-color: white;"> <table style="width: 100px; height: 100px;"> <tr style="width: 100px; height: 100px;"> <td style="vertical-align:bottom; text-align:center; border-style: solid; width: 45%; max-width: 45px; height: 100px;"> <div style="height: 100px; overflow:hidden; display:flex; align-items:flex-end;"> just some text. </div> </td> <td style="vertical-align:bottom; text-align:center; border-style: solid; width: 10%; max-width: 10px; height: 100px;"> <div style="height: 100px; overflow:hidden; display:flex; align-items:flex-start;"> some more text, just a little bit more than the other cell. I'm looking for some overflow to this thing. </div> </td> <td style="vertical-align:bottom; text-align:center; border-style: solid; width: 45%; max-width: 45px; height: 100px;"> <div style="height: 100px; overflow:hidden; display:flex; align-items:flex-end;"> just some text. </div> </tr> </table> </body>
＆＃13;
＆＃13;
＆＃13;

另请注意，您应该确保基于百分比的总计加起来达到100％，因为大多数浏览器都会尝试纠正＆＃39;为你自动;）

编辑2 ：

你最后的尝试非常接近，但错过了两件事：你的中间专栏正在使用align-items: flex-start，而它应该使用align-items: flex-end。第二步是在flexbox div中添加另一个 div ，您可以将margin: 0 auto作为中心：

＆＃13;
＆＃13;
<body style="padding-top: 0px; padding-left: 10px; padding-right: 10px; margin: 0px; overflow-y: scroll; overflow-x: hidden; background-color: white;"> <table style="width: 400px; height: 400px;"> <tr style="width: 400px; height: 400px;"> <td style="vertical-align:bottom; border-style: solid; width: 45%; max-width: 180px; height: 400px;"> <div style="height: 400px; overflow:hidden; display:flex; align-items:flex-end;"> <div style="margin: 0 auto;"> just some text. </div> </div> </td> <td style="vertical-align:bottom; border-style: solid; width: 10%; max-width: 40px; height: 400px;"> <div style="height: 400px; overflow:hidden; display:flex; align-items:flex-end;"> <div style="margin:0 auto;"> some more text, just a little bit more than the other cell. I'm looking for some overflow to this thing. </div> </div> </td> <td style="vertical-align:bottom; border-style: solid; width: 45%; max-width: 180px; height: 400px;"> <div style="height: 400px; overflow:hidden; display:flex; align-items:flex-end;"> <div style="margin: 0 auto;"> just some text. </div> </div> </tr> </table> </body>
＆＃13;
＆＃13;
＆＃13;

我还创建了this new fiddle。

希望这有帮助！：）

如何制作一个固定的表，允许您处理溢出和垂直对齐

1 个答案: