首页 > web前端 > css教程 > 正文

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

Barbara Streisand
发布: 2024-11-15 11:54:02
原创
821 人浏览过

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
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板