文字竖形排列

使用CSS将一段文字竖形排列，模仿春联的效果 使用writing-mode属性： 这是实现竖直文本布局最直接的方法。writing-mode属性可以让你改变文本的方向。要让文字竖直排列，你可以将writing-mode设置为vertical-rl（从右到左竖直排列）或vertical-lr（从左到右竖直排列）。

知识点

• writing-mode - 属性定义了文本水平或垂直排布以及在块级元素中文本的行进方向。
• letter-spacing - 用于设置文本字符的间距表现

.div_p {
  writing-mode: tb;
  letter-spacing: 20px;
}

writing-mode 值

• normal

此间距是按照当前字体的正常间距确定的。和 0 不同的是，normal 会让用户代理调整文字之间空间来对齐文字。

• <length>

指定文字间的间距以替代默认间距。可以是负值，但有可能会出现 implementation 限制。用户代理不会在此基础上进一步增加或缩减间距来对齐文字。

演示

letter-spacing 值

• horizontal-tb

对于左对齐（ltr）文本，内容从左到右水平流动。对于右对齐（rtl）文本，内容从右到左水平流动。下一水平行位于上一行下方。

• vertical-rl

对于左对齐（ltr）文本，内容从上到下垂直流动，下一垂直行位于上一行左侧。对于右对齐（rtl）文本，内容从下到上垂直流动，下一垂直行位于上一行右侧。

• vertical-lr

对于左对齐（ltr）文本，内容从上到下垂直流动，下一垂直行位于上一行右侧。对于右对齐（rtl）文本，内容从下到上垂直流动，下一垂直行位于上一行左侧。

• sideways-rl 实验性

对于左对齐（ltr）文本，内容从下到上垂直流动。对于右对齐（rtl）文本，内容从上到下垂直流动。所有字形（即使是垂直文本中的字形）都朝向右侧。

• sideways-lr 实验性

对于左对齐（ltr）文本，内容从上到下垂直流动。对于右对齐（rtl）文本，内容从下到上垂直流动。所有字形（即使是垂直文本中的字形）都朝向左侧。

• lr 已弃用

除 SVG1 文档外，已弃用。对于 CSS，请改用 horizontal-tb。

• lr-tb 已弃用

除 SVG1 文档外，已弃用。对于 CSS，请改用 horizontal-tb。

• rl 已弃用

除 SVG1 文档外，已弃用。对于 CSS，请改用 horizontal-tb。

• tb 已弃用

除 SVG1 文档外，已弃用。对于 CSS，请改用 vertical-lr。

• tb-rl 已弃用

除 SVG1 文档外，已弃用。对于 CSS，请改用 vertical-rl。

演示