文本样式（垂直、水平）

目录

一、垂直文本对齐方式（vertical-align）

1、可选值

2、像素

二、文本对齐方式（text-align）

三、文字底部特殊效果（txt-decoration）

四、空白格（white-space）

五、省略多余字体并添加省略号

六、代码

1、例子一二

2、例子三四

---

一、垂直文本对齐方式（vertical-align）

1、可选值

（1）默认值，baseline基线对齐，是英文字母的基本对齐方式

（2）top顶端对齐

（3）bottom底部对齐

（4）middle中间对齐，参考值是小写字母x的中间位置（此设置方式某些情况可能与baseline效果相同）

2、像素

像素大小，例如100px，向上对齐100px

二、文本对齐方式（text-align）

（1）left左对齐

（2）right右对齐

（3）center居中对齐

（4）justify两边对齐，文本对齐常用方式（符合写文章的格式）

三、文字底部特殊效果（txt-decoration）

（1）overline上划线

（2）underline下划线

（3）line-through删除线

（4）none多用于删除a链接下划线

四、空白格（white-space）

（1）normal正常

（2）nowrap不换行

（3）pre保留换行与空白，用于匹配代码格式中的文本

五、省略多余字体并添加省略号

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

六、代码

1、例子一二

    
    
    
    
    


    
This is anapple! But you can't eat it
    
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit ratione unde nemo dolores vitae, doloribus eos veritatis quaerat iste pariatur natus suscipit, debitis commodi ut, nulla culpa voluptatibus aperiam consequatur!
    

2、例子三四

    
    
    
    
    


    
Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae, recusandae voluptatibus, sed iusto quia dolores nam veniam sunt, natus praesentium architecto corrupti officiis omnis eius reprehenderit ratione est ea ipsam!
    
hello i'm li hua
    
hello shit
        aa
            aa
                aa