css中文字书写方向

writing-mode 是 CSS 中的一个属性,用于设置文本、内联元素、表格单元格和表格列的书写方向、文本排列以及块流方向。以下是对 writing-mode 属性的详细介绍:

1. 语法和值

  • 语法writing-mode: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr | initial | inherit;
    • horizontal-tb:水平方向从左到右,从上到下书写方式。这是默认值,类似于西方语言的常规模式。
    • vertical-rl:垂直方向自右而左的书写方式,即从上到下,从右到左。这种布局是东亚语系通常使用的。
    • vertical-lr:垂直方向内内容从上到下,水平方向从左到右。这种布局主要用于内蒙古的蒙古语和满语。
    • sideways-rl:内容垂直方向从上到下排列,并向右倾斜。
    • sideways-lr:内容垂直方向从下到上排列,并向左倾斜。
    • initial:将属性设置为其默认值,即 horizontal-tb
    • inherit:从父元素继承该属性的值。

2. 浏览器支持

  • writing-mode 属性在现代浏览器中得到了广泛的支持,包括 Chrome、Firefox、Safari 和 Edge。
  • 在旧版本的 Internet Explorer 中,writing-mode 是一个私有属性,但在后续版本中逐渐被标准化。

3. 兼容性前缀

  • 为了确保在所有浏览器中都能正常工作,有时可能需要使用浏览器特定的前缀,如 -webkit-(针对 Chrome 和 Safari)和 -ms-(针对 Internet Explorer)。

4. 使用场景

  • 支持多种语言的排版,特别是东亚语言的竖排文本。
  • 创造非传统的页面布局和视觉效果。

5. 注意事项

  • writing-mode 属性会改变元素的布局方向,但不会影响文本内容的实际顺序。
  • 如果父元素设置了 writing-mode 属性,子元素会继承该属性,除非子元素自己也设置了 writing-mode 属性。
  • 在使用 writing-mode 属性时,可能需要同时调整其他相关属性,如 text-alignpaddingmargin 等,以确保布局的正确性。

6. 示例

.example-text {
    writing-mode: vertical-rl; /* 设置为垂直方向自右而左的书写方式 */
    text-align: right; /* 调整文本对齐方式以适应新的书写方向 */
    padding: 10px; /* 添加内边距以改善可读性 */
}

最后附上效果案例https://jsrun.net/2fDKp

相关推荐

  1. css文字书写方向

    2024-07-10 17:26:01       27 阅读
  2. CSS书写位置

    2024-07-10 17:26:01       65 阅读
  3. vue 项目常用的几种import 书写 方式

    2024-07-10 17:26:01       51 阅读
  4. SpringBoot的yaml 与properties文件书写格式

    2024-07-10 17:26:01       37 阅读
  5. 前端开发需要注意的CSS命名规则以及书写顺序

    2024-07-10 17:26:01       58 阅读
  6. css定位方式

    2024-07-10 17:26:01       65 阅读
  7. 第二十六章HTML与CSS书写规范

    2024-07-10 17:26:01       24 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-10 17:26:01       99 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-10 17:26:01       107 阅读
  3. 在Django里面运行非项目文件

    2024-07-10 17:26:01       90 阅读
  4. Python语言-面向对象

    2024-07-10 17:26:01       98 阅读

热门阅读

  1. 19.JWT

    19.JWT

    2024-07-10 17:26:01      29 阅读
  2. 实证Stata代码命令汇总

    2024-07-10 17:26:01       21 阅读
  3. 将 build.gradle 配置从 Groovy 迁移到 Kotlin

    2024-07-10 17:26:01       26 阅读
  4. MySQL数据库字符集utf8mb4的排序规则介绍

    2024-07-10 17:26:01       29 阅读
  5. 人形机器人强化学习控制分类

    2024-07-10 17:26:01       26 阅读
  6. 小抄 20240708

    2024-07-10 17:26:01       26 阅读
  7. sklearn基础教程

    2024-07-10 17:26:01       29 阅读
  8. 图形渲染基础-GPU驱动的渲染管线

    2024-07-10 17:26:01       30 阅读
  9. 数据库的基本概念

    2024-07-10 17:26:01       31 阅读
  10. 图形渲染基础-Unity渲染管线介绍

    2024-07-10 17:26:01       27 阅读
  11. spring xml实现bean对象(仅供自己参考)

    2024-07-10 17:26:01       32 阅读
  12. Tomcat异常处理【Spring源码学习】

    2024-07-10 17:26:01       38 阅读