html 文字竖排效果

最新推荐文章于 2024-05-29 09:40:33 发布

csdn_chenli

最新推荐文章于 2024-05-29 09:40:33 发布

阅读量1.9w

点赞数 2

分类专栏： html5

本文链接：https://blog.csdn.net/csdn_chenli/article/details/51911370

版权

html5 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

废话不多说，看效果；

实例一：

实现这样的效果：文字是从上而下，从左向右。显示

属性：

-webkit-writing-mode：vertical-rl;

writing-mode:lr-tb ;

html code

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>文字竖排效果</title>
</head>
<style>

  .e_content h2.myGift{ width: 80px; height: auto; float: left; display: block; font-size: 48px; color: #000000; text-align: center; margin: 30% 30px 10% 70px;}
  .e_content_mian { width:150px; float: left; margin: 100px 20px 100px 0px; height: 480px;background: #00FF00; }
  .e_content_mian p{-webkit-writing-mode:vertical-lr;writing-mode:tb-rl;writing-mode:vertical-lr; font-size:24px;color: #000000; padding: 0px 0px; text-align: justify;}

</style>
<body>
  <div class="e_content_mian">
   <p>
         
   礼物是最好的表达友谊的一种物品。礼物是最好的表达友谊的一种物品。
   礼物是最好的表达友谊的一种物品。礼物是最好的表达友谊的一种物品。
   </p>
  </div>
</body>
</html>

实例二：

效果图

实现这样的效果：文字是自上而下，从右向左

属性：
-webkit-writing-mode:vertical-rl;

writing-mode:tb-rl;

html code

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>文字竖排显示</title>
  <style>

   .f_mian{ width:300px ; height: 450px; float: right; margin: 0px 50px; overflow: auto;}
   .f_mian p{
    -webkit-writing-mode:vertical-rl;
    writing-mode:tb-rl;
    writing-mode:vertical-rl;
    text-align: justify;
    font-size:24px;
    color: #000000;
    padding: 0px 0px;
    display: block; float: right;}

  </style>
</head>
<body>
  <div class="f_mian">
    <p>      
     礼物是最好的表达友谊的一种物品。礼物是最好的表达友谊的一种物品。
     礼物是最好的表达友谊的一种物品。礼物是最好的表达友谊的一种物品。
     礼物是最好的表达友谊的一种物品。礼物是最好的表达友谊的一种物品。

    </p>

  </div>
</body>
</html>

取值

Horizontal-tb:水平方向自上而下的书写方式。即。Left-right-top-bottom（类似IE私有值 lr-tb）

Vertical-rl:垂直方向自右而左的书写方式。即top-bottom-right-left(类似IE私有值tb-rl)

Vertical-lr:垂直方向自左而右边的书写方式。即top-bottom-left-right

Lr-tb:左-右，上-下。对象中的内容在水平方向上从左向右流入。后一行在前一行的下面。所有的字形都是竖直向上的。

tb-rl : 上-下，右-左。对象中的内容在垂直方向上从上向下流入，自右向左。后一竖行在前一竖行的左面。全角字符是竖直向上的，半角字符如拉丁字母或片假名顺时针旋转90度。这种布局是东亚语系通常使用的

1. text-align：justify

text-align:jusify实现文本两端对齐布局，兼容IE

对于text-align 我们再熟悉不过了，可是它有个justify属性，平时很少用到，就鲜为人知了。justify是一种文本靠两边布局方式，一般应用于书刊杂志排版；合理运用text-align:justify 有时会省去很多开发的时间。

使用text-align:justify时需要结合另外一个IE私有属性：text-justify:inter-ideograph ；

text-justify语法：
text-justify : auto |inter-word | newspaper |distribute | distribute-all-lines | inter-ideograph
text-justify参数
auto：允许浏览器用户代理确定使用的两端对齐法则；
inter-word：通过增加字之间的空格对齐文本。该行为是对齐所有文本行最快的方法。它的两端对齐行为对段落的最后一行无效；
newspaper ：通过增加或减少字或字母之间的空格对齐文本。是用于拉丁文字母表两端对齐的最精确格式；
distribute：处理空格很像newspaper，适用于东亚文档。尤其是泰国；
distribute-all-lines：两端对齐行的方式与distribute相同，也同样不包含两段对齐段落的最后一行。适用于表意字文档；
inter-ideograph：为表意字文本提供完全两端对齐。他增加或减少表意字和词间的空格。

因此我们要把text-align:justify;text-justify:inter-ideograph;放在一起来兼容IE浏览器：

参考学习网站：

http://www.zhihu.com/question/37423363

http://www.jb51.net/css/110976.html

http://www.divcss5.com/wenji/w596.shtml?jdfwkey=xqmyq2

多看看这些网站，有助于了解css文字竖排效果。

记笔记是个很好的习惯，有助于学习。希望能帮助到你，

csdn_chenli

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
html 文字竖排效果

废话不多说，看效果；实例一：实现这样的效果：文字是从上而下，从左向右。显示属性：-webkit-writing-mode：vertical-rl;writing-mode:lr-tb ; html code 文字竖排效果 .e_content h2.myGift{ widt
复制链接

扫一扫