zoukankan      html  css  js  c++  java
  • CSS文字竖排方法(转)

    有时候,我们需要对网页某个区域的文字竖排,竖向排列,横向的当然大家都见惯了,对于竖排,一时间找不到思路了,呵呵,其实和横排一样简单,下面介绍4种方法来实现CSS文字竖排。

      第一种方法:将需要竖排显示的字符放在span中,在CSS中设置span的display属性为block,不过不推荐使用这种方法,因为有些麻烦,代码如下:

    h1 span { display: block; } 
    <h1> 
    <span> N </span> 
    <span> E </span> 
    <span> T </span> 
    <span> T </span> 
    <span> U 
    <span> T </span> 
    <span> S </span> 
    </h1>

      第二种方法A:同样使用CSS,在需要竖向显示的地方,强制定义显示区域的宽度,这样字符会自动竖向排列:请看具体代码:

    <!DOCTYPE html> 
    <html> 
    <head> 
    <meta charset=utf-8 /> 
    <title>Vertical Text</title> <style> 
    h1 { 50px; font-size: 50px; word-wrap: break-word; } 
    </style> </head> 
    <body> 
    <h1> NETTUTS </h1> 
    </body> 
    </html>第二种方法B:同样是使用CSS,推荐使用这种方法,觉得这个方法兼容性也好,而且代码简洁,字符也容易控制。

    <!DOCTYPE html> 
    <html> 
    <head> 
    <title>竖向排列的文字</title> 
    <style> 
    h1 { 50px; font-size: 50px; word-wrap: break-word; letter-spacing: 20px; } </style> </head> 
    <body> 
    <h1>竖向排列的文字</h1>
    </body> 
    </html>

      第三种方法:使用JavaScript(不推荐,其实这么一个小小的功能,动用JS就太不划算了,毕竟我们有比这更有效、更简洁的办法)

    <!DOCTYPE html> 
    <html> 
    <head> 
    <meta charset=utf-8 /> 
    <title>Vertical Text</title> <style> 
    h1 span { display: block; } 
    </style> 
    </head> 
    <body> 
    <h1> NETTUTS </h1> <script> 
    var h1 = document.getElementsByTagName(‘h1′)[0]; 
    h1.innerHTML = ‘<span>’ + h1.innerHTML.split(”).join(‘</span><span>’) + ‘</span>’; </script> 
    </body> 
    </html>

      四种方法介绍完了,究竟哪一种更适合您呢?自己比较下,根据你自己的实际情况选择吧,每种方法各有千秋。

  • 相关阅读:
    在typescript中interface和type的区别和相同点
    微信小程序常用的方法
    使用vite创建vue3项目
    JavaCV-流媒体开发系列文章(索引)
    Java 8 日期时间 API
    JavaFX桌面应用-JavaFX应用打包exe及构建安装包
    JavaCV 视频滤镜(LOGO、滚动字幕、画中画、NxN宫格)
    JavaCV 采集摄像头和麦克风数据推流直播
    JavaCV 采集摄麦克风音频数据
    JavaCV 采集摄像头及桌面视频数据
  • 原文地址:https://www.cnblogs.com/ghfjj/p/6491313.html
Copyright © 2011-2022 走看看