CSS 表格格式问题

Question

我在格式化表格时遇到了一些问题!我想制作一个表格，其中所有单元格的宽度和高度都相同。换句话说，它们不会溢出。

我可以使用 table-layout:fixed 使单元格不会在 x 轴上溢出，但是我在防止单元格在 y 轴上溢出时遇到了一些问题-轴。我也想隐藏它，但出于某种原因，CSS 不配合我!

我不会详细说明，因为这与我遇到的问题无关，但我不是在寻找绝对的解决方案，例如拥有高度:50px 样式。我想要一个通用的解决方案来防止这种溢出，谢谢!

我在下面提供了一些示例 CSS 和 HTML。如果您需要任何说明，请告诉我! http://jsfiddle.net/pdtua295/1/

CSS

table.pztable {
  border-collapse:separate;
  table-layout:fixed;
  overflow:hidden;
  margin:0px;
  width:100px;
  height:100px;
}
td.pzcol {
  border:1px dotted #2F2F2F;
  padding: 0px 2px 5px 2px;
  text-align:center;
  vertical-align:middle;
}
span.pztext {
  font-family:Tahoma; 
}

HTML

...

<table class="pztable">
  <tbody>
  <tr>
    <td class="pzcol">
       <span class="pztext">Alice</span>
    </td>
    <td class="pzcol">
       <span class="pztext">Bob</span>
    </td>
  </tr>

  <tr>
    <td class="pzcol">
       <span class="pztext">S<br>T<br>R<br>E<br>T<br>C<br>H</span>
    </td>
    <td class="pzcol">
       <span class="pztext">This won't stretch horizontally.</span>
    </td>
  </tr>
  </tbody>
</table>

...

Answer 1

试试这个word-wrap: break-word;

这会收支平衡

[I edited your code][1]


  [1]: http://jsfiddle.net/pdtua295/1/