CSS学习之文本样式

最新推荐文章于 2024-07-21 20:52:32 发布

qq_45821482

最新推荐文章于 2024-07-21 20:52:32 发布

阅读量87

点赞数

文章标签： css 学习前端

本文链接：https://blog.csdn.net/qq_45821482/article/details/129014956

版权

1.设置文字阴影

设置格式：text-shadow：x y blur color

x=>在水平方向的偏移量，正值向右

y=>在垂直方向的偏移量，正值向下

blur=>设置阴影的模糊范围

例如：

<!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>
        h2{
            text-shadow: 2px 2px 2px red;
        }
    </style>
</head>
<body>
  <h2>导慷使下。</h2>
</body>
</html>

2.设置文本首行缩进

设置格式：text-indent: 2em

<!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>
       p{ text-indent: 2em;}
    </style>
</head>
<body>
  <p>死慧六，着。</p>
</body>
</html>

运行这段代码，输出的文字前会空出两个字体大小的空位

3.文本单行省略

例如：

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

            width: 300px;

            white-space: nowrap;

            overflow: hidden;

            text-overflow: ellipsis;
        }
    </style>
</head>

<body>
    <div>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Delectus.</div>
</body>

</html>

这样无法显示的单词就会变为省略号