文本样式（垂直、水平）

comegoing-归去兮来

已于 2023-12-06 15:52:15 修改

阅读量770

点赞数

分类专栏：前端css基础文章标签： html 前端 css

于 2022-08-11 10:46:04 首次发布

本文链接：https://blog.csdn.net/comegoing_xin_lv/article/details/126280497

版权

前端css基础专栏收录该内容

27 篇文章 3 订阅

订阅专栏

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

1、可选值

2、像素

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

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

一、垂直文本对齐方式（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、例子一二

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本样式</title>
    <style>
        div{
            border: solid red 1px;
            font-size: 40px;
        }
        span{
            /* vertical-align（垂直文本对齐方式）：
            baseline基线对齐，多见于字母的对齐
            top顶端对齐
            bottom底部对齐
            middle中间对齐，是小写x的中间

            或者以像素大小，例如100px，向上对齐100px
             */
            font-size: 20px;
            border: solid blue 1px;
            vertical-align: baseline;
        }
        p{  
            /* 
            text-align(文本对齐方式)：
            left左对齐
            right右对齐
            center居中对齐
            justify两边对齐（符合写文章的格式）
            
            */
            border: 1px solid black;
            width: 400px;
            /* text-align: justify; */
            text-align: right;
        }
    </style>
</head>
<body>
    <div>This is an<span>apple</span>! But you can't eat it</div>
    <p>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!</p>
    
</body>
</html>

2、例子三四

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本样式2</title>
    <style>
        .box1{
            /* 将多余字体省略不显示并增加省略号的方法 */
            width: 200px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            /* 
            white-space（空白格）：
            1.normal正常
            2.nowrap不换行
            3.pre保留换行与空白，用于匹配代码中的文本
            */
        }
        .box2{
            /* 
            txt-decoration可选值：
            1.overline上划线
            2.underline下划线
            3.line-through删除线
             */
            text-decoration: line;
        }
        .box3{
            white-space: pre;
        }
    </style>
</head>
<body>
    <div class="box1">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!</div>
    <div class="box2">hello i'm li hua</div>
    <div class="box3">hello shit
        aa
            aa
                aa
    </div>
</body>
</html>