文本样式(垂直、水平)

发布于:2023-01-22 ⋅ 阅读:(11) ⋅ 点赞:(0) ⋅ 评论:(0)

目录

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

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