css:writing-mode控制文字水平排布或垂直排布

简介: css:writing-mode控制文字水平排布或垂直排布

writing-mode 属性定义了文本水平或垂直排布以及在块级元素中文本的行进方向。

文档

语法

/* 关键字值 */
writing-mode: horizontal-tb;
writing-mode: vertical-rl;
writing-mode: vertical-lr;

效果

在线demo:https://mouday.github.io/front-end-demo/css/writing-mode.html

6666.png

示例代码

<style>
  /* 表格边框 */
  table {
    border-collapse: collapse;
  }
  table td,
  table th {
    border: 1px black solid;
    padding: 3px;
  }
  table th {
    background-color: lightgray;
  }
  .example {
    height: 75px;
    width: 75px;
  }
  .example.Text1 span,
  .example.Text1 {
    writing-mode: horizontal-tb;
  }
  .example.Text2 span,
  .example.Text2 {
    writing-mode: vertical-lr;
  }
  .example.Text3 span,
  .example.Text3 {
    writing-mode: vertical-rl;
  }
  .example.Text4 span,
  .example.Text4 {
    writing-mode: sideways-lr;
  }
  .example.Text5 span,
  .example.Text5 {
    writing-mode: sideways-rl;
  }
</style>
<table>
  <tr>
    <th>值</th>
    <th>中文</th>
    <th>英文</th>
    <th>希伯来语</th>
    <th>日文</th>
  </tr>
  <tr>
    <td>horizontal-tb</td>
    <td class="example Text1"><span>我家没有电脑。</span></td>
    <td class="example Text1"><span>Example text</span></td>
    <td class="example Text1"><span>מלל ארוך לדוגמא</span></td>
    <td class="example Text1"><span>1994年に至っては</span></td>
  </tr>
  <tr>
    <td>vertical-lr</td>
    <td class="example Text2"><span>我家没有电脑。</span></td>
    <td class="example Text2"><span>Example text</span></td>
    <td class="example Text2"><span>מלל ארוך לדוגמא</span></td>
    <td class="example Text2"><span>1994年に至っては</span></td>
  </tr>
  <tr>
    <td>vertical-rl</td>
    <td class="example Text3"><span>我家没有电脑。</span></td>
    <td class="example Text3"><span>Example text</span></td>
    <td class="example Text3"><span>מלל ארוך לדוגמא</span></td>
    <td class="example Text3"><span>1994年に至っては</span></td>
  </tr>
  <tr>
    <td>sideways-lr</td>
    <td class="example Text4"><span>我家没有电脑。</span></td>
    <td class="example Text4"><span>Example text</span></td>
    <td class="example Text4"><span>מלל ארוך לדוגמא</span></td>
    <td class="example Text4"><span>1994年に至っては</span></td>
  </tr>
  <tr>
    <td>sideways-rl</td>
    <td class="example Text5"><span>我家没有电脑。</span></td>
    <td class="example Text5"><span>Example text</span></td>
    <td class="example Text5"><span>מלל ארוך לדוגמא</span></td>
    <td class="example Text5"><span>1994年に至っては</span></td>
  </tr>
</table>


相关文章
|
3天前
|
前端开发 算法
【css炫酷动画】让面试官眼前一亮的故障风格文字动画,3年Web前端开发工程师面试经验分享
【css炫酷动画】让面试官眼前一亮的故障风格文字动画,3年Web前端开发工程师面试经验分享
|
4天前
|
前端开发
css文本垂直展示------
css文本垂直展示------
8 1
css文本垂直展示------
|
6天前
|
前端开发 容器
css 中可以让文字在垂直和水平方向上重叠的两个属性是什么?
css 中可以让文字在垂直和水平方向上重叠的两个属性是什么?
10 1
|
6天前
|
弹性计算 前端开发
CSS 文字超出变为省略号
CSS 文字超出变为省略号
17 0
|
6天前
超简单的html+css魔幻霓虹灯文字特效
超简单的html+css魔幻霓虹灯文字特效
15 3
超简单的html+css魔幻霓虹灯文字特效
|
6天前
|
Web App开发 弹性计算 前端开发
纯 CSS 实现多行文字截断
纯 CSS 实现多行文字截断
23 1
|
6天前
|
前端开发 容器
css 中可以让文字在垂直和水平方向上重叠的两个属性是什么?
css 中可以让文字在垂直和水平方向上重叠的两个属性是什么?
|
6天前
|
人工智能 前端开发 开发者
Baidu千帆大模型赋能——CSS控制DIV垂直水平居中——送给大一的孩子们,学会用AI思维来帮助你解决问题
Baidu千帆大模型赋能——CSS控制DIV垂直水平居中——送给大一的孩子们,学会用AI思维来帮助你解决问题
32 1
|
6天前
|
前端开发
html+css+js实现自动敲文字效果
html+css+js实现自动敲文字效果
25 0