How to Rotate Text Left 90 Degrees in HTML and Adjust Cell Size Accordingly?

How to Rotate Text Left 90 Degrees and Adjust Cell Size According to Text in HTML

To achieve your desired rotating effect while also adjusting cell sizes accordingly, consider using a combination of CSS and HTML.

CSS Solution:

<code class="css">th {
  vertical-align: bottom;
  text-align: center;
}

th span {
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}</code>

HTML Solution:

<code class="html"><table>
  <tr>
    <th><span>Rotated text by 90 deg.</span></th>
  </tr>
</table></code>

In this solution:

• th { vertical-align: bottom; text-align: center; }: Aligns the rotated text vertically and horizontally within the cells.
• th span { ...writing-mode: vertical-rl; }: Sets the writing mode of the text to vertical, allowing it to be rotated vertically.
• th span { transform: rotate(180deg); }: Rotates the text by 180 degrees to face the left.
• th span { white-space: nowrap; }: Prevents the text from wrapping, so it fits all on one line and adjusts the cell size accordingly.

Note:

This solution requires you to wrap the rotated text in a element. The element is only necessary for Chrome because it doesn't natively support changing the text direction for elements.

The above is the detailed content of How to Rotate Text Left 90 Degrees in HTML and Adjust Cell Size Accordingly?. For more information, please follow other related articles on the PHP Chinese website!