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

问题

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

标签

html

css

vertical-text