如何防止内容覆盖单元格边框,使内容保留在单元格中。我希望不设置固定的宽度,因为内容的长度可能会变化。
参考示例:http://jsfiddle.net/1mmh7510/5/ CSS
参考示例:http://jsfiddle.net/1mmh7510/5/ CSS
.rotate {
height: 400px;
}
.rotate > div {
-webkit-writing-mode:vertical-rl;
-ms-writing-mode:tb-rl;
writing-mode:vertical-rl;
transform: rotate(-180deg);
}
HTML
<table style="background-color:#e4e6ea;" border="0" cellspacing="1">
<tbody>
<tr class="tableheader-row-dashboard">
<td style="background-color:white;"width="90px"> Date</td>
<td style="background-color:white" width="90px">Phone No</td>
<td style="background-color:white; vertical-align: bottom;" class="rotate" width="20px"><div>Test.. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. Test.. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</div></td>
</tr>
<tr class="tablerow-rowd">
<td class="text">06/11/2015</td>
<td class="text">1234567890</td>
<td class="text">X</td>
</tr>
</tbody>
</table>
编辑:
看起来使用 CSS 是不可能的。如何使用 jQuery 获取内容的宽度,然后设置 td
的固定宽度?
transform-origin: top left; transform: rotate(-90deg);
至少可以使文本保持在框内。据我所知,要使框完美适配是不可能的,除非使用JS。 - gummbahla