文本的样式

一、text-align（文本水平对齐）

- left：左对齐

- right：右对齐

- center：居中对齐

- justify：两端对齐

二、vertical-align（垂直对齐）

- baseline：默认值，基线对齐

- top：顶端对齐

- bottom：底部对齐

- middle：居中对齐

- 使用数字进行设置

三、text-decoration（文本修饰）

- none：什么都没有

- underline：下划线

- line-through：删除线

- overline：上划线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本样式</title>
    <style>
        .box1{
            width: 400px;
            height: 150px;
            border: 1px solid rgba(105, 148, 150, 0.623);

            /* 文本水平对齐 */
            /* text-align: left; */
            /* text-align: center; */
            text-align: justify;
            /* text-align: right; */

            /* 文本垂直对齐 */
            /* vertical-align: bottom; */
            /* vertical-align: top; */
            /* vertical-align: baseline; */
            /* vertical-align: middle; */
            vertical-align: 100px;

            /* text-decoration（文本修饰） */
            /* text-decoration: underline; */
            /* text-decoration: overline; */
            text-decoration: line-through; /* 兼容性不好 */
        }
    </style>
</head>
<body>
    <div class="box1">
        <p>I don't think that when people grow,
            I think it's a selecting process, 
            knowing what's the most important and what's the least. 
            And then be a simple man.</p>
    </div>
</body>
</html>

四、white-space（网页空白处理）

- normal：正常

- nowrap：不换行

- pre：保留空白

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用text-overflow截断超长文字显示技巧</title>
    <style>
        .box2{
            width: 200px;
            /* 不换行显示 */
            white-space: nowrap;
            /* 裁剪隐藏 */
            overflow: hidden;
            /* 
                文本的裁剪
                text-overflow: ellipsis;  裁剪后出现省略号 
            */
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <div class="box2">
        人生有三境：第一镜为“昨夜西风凋碧树”。
        第二境为“衣带渐宽终不悔，为伊消得人憔悴”。
        第三境为“众里寻她千百度，蓦然回首，那人正在，灯火阑珊处”。
    </div>
</body>
</html>

 

posted @ 2020-10-29 13:59  娜豆  阅读(101)  评论(0)  编辑  收藏  举报