vertical text in table cell using css3 writing-mode in Chrome

时光怂恿深爱的人放手 提交于 2020-12-05 12:12:30

问题


First of all, I'd like to acknowledge that the question Vertical text in table cell exists, but since that simply tries to rotate the whole cell instead of having vertical writing style, it is not relevant to my question (for example that question does not cover text-orientation: upright; applications)

I am currently working on something where I'd like to use CSS vertical text, within a table cell, using writing-mode: vertical-rl or vertical-lr. However, when I try to apply this to the table, it does not do anything. See the following minimal example:

th, td, div {
    writing-mode: vertical-rl;
}
<table>
  <tr><th>foo</th><th>bar</th></tr>
  <tr><td>baz</td><td>quux</td></tr>
</table>
<div>Lorem ipsum dolor sit amet</div>

As you can see when viewing this in Chrome, the text does not get rotated at all in the table (while the div makes clear the style does work elsewhere for Chrome). Using the Chrome inspector, the style does seem to get matched to the cells correctly, but under the 'Computed' styles tab, it shows that the computed style is writing-mode: horizontal-tb;.

Is there anything I can do to make vertical text work in all major browsers? Going by the way Mozilla does it on their table at the bottom of their MDN pages, which uses transform: rotate(-90deg), it does not seem likely, but then it does make their statement at the top of the page ("It is useful for (...) making vertical table headers.") a bit curious.

The reason I'd like to use writing-mode is because, when using transform: rotate(90deg) it does not re-calculate the table cell's dimensions, causing text to overflow outside the cell in some cases.


回答1:


Just wrap the text into the td-element with another element like the div-element.

.vertical {
    writing-mode: vertical-rl;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <title>writing-mode: vertical-rl</title>
 </head>
<body>

<h2>writing-mode: vertical-rl</h2>

<table>
  <tr><th>foo</th><th>bar</th></tr>
  <tr><td>baz</td><td><div class='vertical'>quux</div></td></tr>
</table>
</body>
</html>


来源:https://stackoverflow.com/questions/59024097/vertical-text-in-table-cell-using-css3-writing-mode-in-chrome

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!