如何使用CSS实现文字的竖排(css,web开发)

时间:2024-05-05 07:14:24 作者 : 石家庄SEO 分类 : web开发
  • TAG :

    %E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8CSS%E5%AE%9E%E7%8E%B0%E6%96%87%E5%AD%97%E7%9A%84%E7%AB%96%E6%8E%92

样式表的文字处理属性中有两个重要的属性:writing-mode和text-align。让我们先看看它们的用法:

  1. writing-mode(设置对象书写方向)

  语法:writing-mode : lr-tb、tb-rl
  参数:lr-tb:从左向右,从上往下  tb-rl:从上往下,从右向左
  示例:

CSS Code复制内容到剪贴板

div{writing-mode:tb-rl;}

  2. text-align(设置对象中文本的对齐方式)

  语法:text-align : left、right、center、justify
  参数:left:左对齐  right:右对齐  center:居中  justify:两端对齐
  示例:

CSS Code复制内容到剪贴板

div{text-align:center;}

而通常普通的排版思路:对文字对象宽度设置只能排下一个文字的宽度距离,让文字一行排不下两个文字使其文字自动换行,就形成了竖立排版需求。

CSS Code复制内容到剪贴板

<!DOCTYPEhtml>

<html>

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>

<title>竖列排版实例在线演示www.yisu.com</title>

<style>

body{text-align:center}

.shuli{margin:0auto;width:20px;line-height:24px;border:1pxsolid#333}

</style>

</head>

<body>

<divclass="shuli">我是竖列排版</div>

</body>

</html>

本文:如何使用CSS实现文字的竖排的详细内容,希望对您有所帮助,信息来源于网络。
上一篇:CSS3中@media的实际使用方式下一篇:

9 人围观 / 0 条评论 ↓快速评论↓

(必须)

(必须,保密)

阿狸1 阿狸2 阿狸3 阿狸4 阿狸5 阿狸6 阿狸7 阿狸8 阿狸9 阿狸10 阿狸11 阿狸12 阿狸13 阿狸14 阿狸15 阿狸16 阿狸17 阿狸18