如何在 CSS 中将文本垂直放置在右侧？

Barbara Streisand

发布： 2024-11-15 11:54:02

原创

883 人浏览过

How to Orient Text Vertically on the Right in CSS?

如何使用 CSS 将文本垂直放置在右侧

您可以在 CSS 中将文本垂直放置在右侧吗？例如，您可能想要垂直显示“星期日”之类的日期，但位于元素的右侧。

问题：

您已尝试使用以下代码，但它不会反转方向：

div {
  writing-mode: vertical-rl;
  text-orientation: sideways;
}

登录后复制

解决方案：

并非所有浏览器都支持横向值。相反，您可以使用缩放变换来实现所需的效果：

div {
  writing-mode: vertical-rl;
  /*text-orientation: sideways;*/
  transform:scale(-1);
}

登录后复制

这将水平翻转文本，使其看起来好像垂直位于右侧。

示例：

<div>Sunday</div>

登录后复制

输出变形：

|
|
| Dimanche

登录后复制

以上是如何在 CSS 中将文本垂直放置在右侧？的详细内容。更多信息请关注PHP中文网其他相关文章！

来源：php.cn

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

作者最新文章