前端学习笔记66-其他的文本样式

2023-11-24 23:13:40

前端学习笔记66-其他的文本样式

文本修饰
处理空白

文本修饰

样式：text-decoration
可选值
none：什么都没有
underline：下划线
overline：上划线
此外，还可以设置颜色和样式。

<!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>Document</title>
    <style>
        div{
            font-size: 50px;
            font-family: 微软雅黑;
            text-decoration: underline red dotted;
        }
    </style>
</head>
<body>
    <div class="box1">
        今天天气真热
    </div>
</body>
</html>

挺简单的，不过ie浏览器有点不一样(之前我说我没有IE，其实是我没找到。)，ie只能设置下划线，不能设置颜色和样式。
下面是ie的结果。

你看，没有下划线，如果我把颜色和dotted去掉，就有了

    <style>
        div{
            font-size: 50px;
            font-family: 微软雅黑;
            text-decoration: underline;
        }
    </style>

所以，哎，ie真是一个赶不上时代的孩子。

处理空白

看下图，当文字太多时，我们想用省略号表示，然后想看完整的可以点进行看，这个如何设置呢？
用white-space

功能：设置网页如何处理空白
可选值：
narmal：正常情况，换行
nowrap：不换行
pre：保留空白
这里不换行就是都写在一行
保留空白这个嘛，当我们在写代码时，连续写好几个空格，实际上没啥用只会显示一个，但是如果我们这里设置pre，它就会显示好几个了。

<!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>Document</title>
    <style>
        .box1{
            white-space: nowrap;
            border: 1px red solid;
        }
        .box2{
            white-space: normal;
            border: 1px red solid;
        }
        .box3{
            font-size: 30px;
            white-space: pre;
        }
        .box4{
            font-size:30px;
        }
    </style>
</head>
<body>
    <div class="box1">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit vitae eaque incidunt, quos odio tenetur mollitia sit debitis delectus unde? Eius molestias reiciendis dolore hic dolores non exercitationem consequatur ullam!</div>
    <div class="box2">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit vitae eaque incidunt, quos odio tenetur mollitia sit debitis delectus unde? Eius molestias reiciendis dolore hic dolores non exercitationem consequatur ullam!</div>
    <div class="box3">
今天天气           真热
    </div>
    <div class="box4">
今天天气           真热
    </div>
</body>
</html>

回到问题，如何实现用省略号来表示显示不了的内容？
首先设置nowrap，然后overflow设置为hidde，接着设置宽度。

<!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>Document</title>
    <style>
        .box1{
            width: 200px;
            white-space: nowrap;
            overflow: hidden;
        }

    </style>
</head>
<body>
    <div class="box1">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit vitae eaque incidunt, quos odio tenetur mollitia sit debitis delectus unde? Eius molestias reiciendis dolore hic dolores non exercitationem consequatur ullam!</div>
    </div>
</body>
</html>

现在就差一个问题了，如何显示省略号。
设置text-overflow，它是设置当内容溢出时，显示的内容的。

        .box1{
            width: 200px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

码农公寓