登陆 注册

html实现文字垂直竖列显示之《念奴娇》

守望者 2020-04-01 243人围观 ,发现5个评论 htmlcss

    有时候我们可能需要将一段文字进行垂直竖列显示,比如像展示古诗词的时候,

        垂直竖列显示一方面与作品本身的时代书写习惯相一致,另一方面彰显优雅厚重。


      尽管我们可以用css中的writing-mode属性方便快捷的设置文字垂直显示,但由于在谷歌,火狐等浏览器中不支持,所以这种方法不具有普遍性。

     还有人说用<br>标签也可以实现类似效果,但大量的<br>标签显得过于冗余和杂乱,并且也不易于理解。


     所以,我来讲一种具有普遍实用性的方法,那就是借用css中的width属性强制文字换行,以实现垂直竖列显示文字,最终实现如下效果:



下面有多句诗词竖列显示,我们先实现一句诗词竖列显示。


首先,来一句诗词,这个默认肯定是横着显示的:

<p class="txt">大江东去</p>


如果竖着显示呢?

只要我们将p标签的宽度设置成只能放下一个文字,那么他每放下一个文字就会强制换行,放一字换一行,这不就实现竖列显示了吗?


下面,调整css样式:

  <style>
     p{width:1em;}
  </style>

好了,这样就实现一句诗词的竖列显示了。


当然我们的最终目的是实现多句或者全篇诗词的竖列显示,怎么办?

我们多来几个如上这种p标签不就行了吗。


当然,需要搞清楚,我们的诗词是自上而下书写,自右而左拜访。

所以,还要做一个工作就是,把这些p标签向右浮动显示。


下面,为了方便统一管理,我们定义他们的class="txt"属性。


最终实例代码如下:(关于图片请自行替换)

<!DOCTYPE html>
<html>

<head>
    <style>

      div.outer{
            width: 800px;
            height: 429px;
            background-image: url("outer.jpg");
            position: relative;
            margin-left: 500px;
      }
        div.back{
            width: 614px;
            height: 254px;
            background-image: url("back.jpg");

            position:absolute;
            right: 500px;
            top: 100px;
            border: 6px solid rgb(135, 108, 61);
            }

        p.txt{
            width:1.2em;
            float: right;
            margin-right: 0.5em;
            margin-top: 2em;
        }
    </style>
</head>
<div class="outer">
 <div class="back">

    <p class="txt">大江东去</p>
    <p class="txt">浪淘尽</p>
    <p class="txt">千古风流人物</p> 

    <p class="txt">故垒西边人道是</p>
    <p class="txt">三国周郎赤壁</p>
    <p class="txt">乱石穿空</p> 

    <p class="txt">惊涛拍岸</p>
    <p class="txt">卷起千堆雪</p> 
    <p class="txt">江山如画</p>
    <p class="txt">一时多少豪杰</p> 

    <p class="txt">遥想公谨当年</p>
    <p class="txt">小乔初嫁了</p> 
    <p class="txt">雄姿英发</p>
   
    <p class="txt">羽扇纶巾谈笑间</p>
    <p class="txt">强虏灰飞烟灭</p> 
    <p class="txt">故国神游</p>

    <p class="txt">多情应笑</p>
    <p class="txt">我早生华发</p> 
    <p class="txt">人生如梦人生如梦</p>
    <p class="txt">一尊还酹江月</p> 

</div>
</div>
<body>

</body>
</html>


   转载请注明本文链接:https://tufeng.xyz/javascript/36.html,谢谢合作!

已有5条评论
  • 2020-04-03 22:21:52

    设计的很漂亮,很典雅!

请关注微信公众号
微信二维码