zoukankan      html  css  js  c++  java
  • css控制竖直文字显示

    假如有一天,你把水平文字看腻味了......

    我建议你不妨试试垂直文字显示,就像这样:

    哈哈!

    言归正传,怎么把一段话,垂直显示呢?

    方法1:

    //把下面代码另存为html试试就知道了;

    //少些了些代码,适合有基础的同学观看,不会再问我;

    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>

    方法2:

    //把下面代码另存为html试试就知道了;

    <!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>

    方法3:

    //把下面代码另存为html试试就知道了;

    <!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>

    方法4:

    //javascript实现的,复杂化了,不过可以装逼嘛

    <!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>

    谢谢观看!

  • 相关阅读:
    54.Spiral Matrix
    53.Maximum Subarray
    基础数据类型包装类
    sqlacodegen逆向数据库
    第四章、常用模块
    第三章、函数编程
    第一章
    第一章 Python基础
    Centos7.0升级python 2.x到3.x
    time
  • 原文地址:https://www.cnblogs.com/lwj820876312/p/7485187.html
Copyright © 2011-2022 走看看