编程技术文章分享与教程

网站首页 > 技术文章 正文

「测试开发全栈-HTML」(15)css字体的文本缩进

hmc789 2024-11-25 12:50:47 技术文章 2 ℃

今天来说下HTML语言CSS样式字体的文本缩进 text-indent

text-indent属性用来指定文本的第一行的缩进，通常是将段落的首行缩进。来看下语法使用:

div {

text-indent:10px;

}

来看下使用效果,使用前:

每一行没有缩进


使用后:

每个段落的第一行都缩进了20px，具体代码如下:

<!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>CSS样式之文本缩进</title>

<style>

p {

text-indent: 20px;

}

</style>

</head>

<body>

<p>第一年，我考上了大学，来到了北京,冬天的雪就像冷冷的冰雨，

在脸上胡乱的拍.摇啊摇，摇啊摇，摇到外婆桥,从此世人眼中的你就像超人一样屹立于天地间。

</p>

<p>一片冰心在玉壶，我劝天公重抖擞，不拘一格降人才。一片冰心在玉壶，我劝天公重抖擞，不拘一格降人才。</p>

<p>只有聆听你的声音，才能抚平我寂寞无聊的心，HTML5。只有聆听你的声音，才能抚平我寂寞无聊的心，HTML5</p>

</body>

</html>


需要缩进的像素可以是任意值，除了正的px,还可以是负的值，可以看下效果:

这不是我的浏览器坏了，展示不了段落首部，是将px修改为-20px


具体代码如下:

<!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>CSS样式之文本缩进</title>

<style>

p {

text-indent: -20px;

}

</style>

</head>

<body>

<p>第一年，我考上了大学，来到了北京,冬天的雪就像冷冷的冰雨，

在脸上胡乱的拍.摇啊摇，摇啊摇，摇到外婆桥,从此世人眼中的你就像超人一样屹立于天地间。

</p>

<p>一片冰心在玉壶，我劝天公重抖擞，不拘一格降人才。一片冰心在玉壶，我劝天公重抖擞，不拘一格降人才。</p>

<p>只有聆听你的声音，才能抚平我寂寞无聊的心，HTML5。只有聆听你的声音，才能抚平我寂寞无聊的心，HTML5</p>

</body>

</html>


根据大家写文章段落的习惯，一般都是缩进两个字，但是20px或者10px是不是2个字的长度呢，回答不是的。缩进字数长度有专门的单位: em

通过设置该属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。

em是一个相对单位，就是当前元素 font-size 1个文字的大小，如果当前元素没有设置大小，则会按照1个父元素文字大小。

我们来看下效果:

确实是缩进了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>CSS样式之文本缩进</title>

<style>

p {

text-indent: 2em;

}

</style>

</head>

<body>

<p>第一年，我考上了大学，来到了北京,冬天的雪就像冷冷的冰雨，

在脸上胡乱的拍.摇啊摇，摇啊摇，摇到外婆桥,从此世人眼中的你就像超人一样屹立于天地间。

</p>

<p>一片冰心在玉壶，我劝天公重抖擞，不拘一格降人才。一片冰心在玉壶，我劝天公重抖擞，不拘一格降人才。</p>

<p>只有聆听你的声音，才能抚平我寂寞无聊的心，HTML5。只有聆听你的声音，才能抚平我寂寞无聊的心，HTML5</p>

</body>

</html>


每个段落第一行如果想要三个字间距，就是3em


今天就先到这里，大家周末快乐~

Tags：

猜你喜欢

标签列表
最新留言