首行缩进怎么设置

最新推荐文章于 2024-04-25 15:32:04 发布
最新推荐文章于 2024-04-25 15:32:04 发布
阅读量3.5k 收藏 5
点赞数 2
分类专栏： js web前端 html+css 文章标签： javascript css vue.js html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lin123_00/article/details/105848280
版权
web前端 同时被 3 个专栏收录
252 篇文章 39 订阅
订阅专栏
html+css
229 篇文章 13 订阅
订阅专栏
js
86 篇文章 4 订阅
订阅专栏

本篇文章所说的内容是一个用HTML缩进段落第一行的代码，我们要知道缩进段落需要用到的属性是text-indent，下面我们就来看一看具体的内容。

首先小编在这里谢谢大家一直的支持，每天都会更新十个web前端基础内容，需要的可以关注我，另外也可以进我的web学习交流群1045267283，领取资料学习资料笔记，可以跟里面的小伙伴一起学习一起成长，不懂的问题也可以问我，随时给大家解答。再次感谢大家。

首行缩进

语法格式：

text-indent :(缩进宽度）

1

p {text-indent:1em;}

代码示例1：缩进单个字符

通过指定“text-indent：1em”缩进一个字符的段落的开头。

代码如下：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

    <style>

    p {text-indent:1em;}

    </style>

</head>

<body>

    <p>但教心似金钿坚，天上人间会相见。临别殷勤重寄词，词中有誓两心知。七月七日长生殿，夜半无人私语时。在天愿作比翼鸟，在地愿为连理枝。</p>

    <p>临别殷勤重寄词，词中有誓两心知。七月七日长生殿，夜半无人私语时。在天愿作比翼鸟，在地愿为连理枝。天长地久有时尽，此恨绵绵无绝期。

    但教心似金钿坚，天上人间会相见。临别殷勤重寄词，词中有誓两心知。七月七日长生殿，夜半无人私语时。在天愿作比翼鸟，在地愿为连理枝。</p>

    <p>临别殷勤重寄词，词中有誓两心知。七月七日长生殿，夜半无人私语时。在天愿作比翼鸟，在地愿为连理枝。天长地久有时尽，此恨绵绵无绝期。

    但教心似金钿坚，天上人间会相见。临别殷勤重寄词，词中有誓两心知。七月七日长生殿，夜半无人私语时。在天愿作比翼鸟，在地愿为连理枝。</p>

</body>

</html>

显示结果

使用Web浏览器显示上述HTML文件。将显示如下所示的效果。可以确认段落的第一行缩进一个字符。

代码示例2：半文字缩进

通过指定“text-indent：0.5 em”，您可以将段落的开头缩进0.5个字符。

代码如下：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

    <style>

    p {text-indent:0.5em;}

    </style>

</head>

<body>

    <p>但教心似金钿坚，天上人间会相见。临别殷勤重寄词，词中有誓两心知。七月七日长生殿，夜半无人私语时。在天愿作比翼鸟，在地愿为连理枝。</p>

 

    <p>临别殷勤重寄词，词中有誓两心知。七月七日长生殿，夜半无人私语时。在天愿作比翼鸟，在地愿为连理枝。天长地久有时尽，此恨绵绵无绝期。

    但教心似金钿坚，天上人间会相见。临别殷勤重寄词，词中有誓两心知。七月七日长生殿，夜半无人私语时。在天愿作比翼鸟，在地愿为连理枝。</p>

 

    <p>临别殷勤重寄词，词中有誓两心知。七月七日长生殿，夜半无人私语时。在天愿作比翼鸟，在地愿为连理枝。天长地久有时尽，此恨绵绵无绝期。

    但教心似金钿坚，天上人间会相见。临别殷勤重寄词，词中有誓两心知。七月七日长生殿，夜半无人私语时。在天愿作比翼鸟，在地愿为连理枝。</p>

</body>

</html>

显示结果

使用Web浏览器显示上述HTML文件，将显示如下所示的效果：可以确认该段落的第一行是缩小的。

代码示例3：像素规范

通过指定“text - indent：14px”缩进14像素段落的开头。

代码如下：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

    <style>

    p {text-indent:14px;}

    </style>

</head>

<body>

    <p>但教心似金钿坚，天上人间会相见。临别殷勤重寄词，词中有誓两心知。七月七日长生殿，夜半无人私语时。在天愿作比翼鸟，在地愿为连理枝。</p>

 

    <p>临别殷勤重寄词，词中有誓两心知。七月七日长生殿，夜半无人私语时。在天愿作比翼鸟，在地愿为连理枝。天长地久有时尽，此恨绵绵无绝期。

    但教心似金钿坚，天上人间会相见。临别殷勤重寄词，词中有誓两心知。七月七日长生殿，夜半无人私语时。在天愿作比翼鸟，在地愿为连理枝。</p>

 

    <p>临别殷勤重寄词，词中有誓两心知。七月七日长生殿，夜半无人私语时。在天愿作比翼鸟，在地愿为连理枝。天长地久有时尽，此恨绵绵无绝期。

    但教心似金钿坚，天上人间会相见。临别殷勤重寄词，词中有誓两心知。七月七日长生殿，夜半无人私语时。在天愿作比翼鸟，在地愿为连理枝。</p>

</body>

</html>

显示结果

使用Web浏览器显示上述HTML文件，将显示如下所示的效果：设置像素数段落的开头是缩进的。

本篇文章到这里就全部结束了。

程序员的生活1
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html文字段落缩进,CSS text-indent段落首行文字缩进分享
weixin_42502448的博客
05-31 3081
DIV CSS text-indent段落首行文字缩进，CSS段首缩进，可控制缩进距离样式教程篇让每个段落首行开头文字缩进，如缩进2个文字距离样式，我将用到text-indent属性样式。。divcss5{text-indent:25px}这里divcss5对象内段落首行开头文字缩进了25像素。css text-indent文本缩进样式属性单词，text-indent的值跟数字+单位组成缩进样式。...
Android设置TextView首行缩进示例代码
09-01
使用过word的都会知道，在文字排版的时候经常要设置首行缩进，这样才会使排版更整齐，那么在Android中当需要设置首行缩进的时候该肿么办呢，下面一起来看看。
CSS_02
qq_43808599的博客
10-06 459
CSS字体样式属性 font-size:字号大小 font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。其中，相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少。具体如下： font-family:字体 font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落文本的字体设置为微软雅黑，可以使用如下C...
CSDN Markdown编辑器中实现首行缩进
最新发布
颜氏风寻的博客
04-25 338
总的来说，这三个实体字符在 HTML 中都用于创建空格，但它们的宽度不同，适用于不同的排版需求。
text-indent和em/rem/px【哎】
pinkowonote的博客
08-06 440
text-indent：首行缩进 https://www.cnblogs.com/leejersey/p/3662612.html em：相对当前元素（font-size）1个文字的大小，如果当前元素没有设置大小，则会按照父元素的1个文字大小 px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册) em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(引自CSS2.0手册) 任意浏
java: 无法从静态上下文中引用非静态 方法
asd147852as的博客
08-14 5208
经过了解知道了因为静态类的方法可以在没有创建实例对象时直接调用，而非静态的成员变量是一个对象属性，只有在对象存在时才可以引用。因此，如果在对象未创建实例时，我们在静态方法中调用了非静态成员方法自然就是非法的。经典灯下黑，手搓代码的时候下意识选择大写，排查了半天就是没看这个，也是我眼不好使了，引用错了，记录下来希望提醒自己。静态方法可以不用创建对象就调用，非静态方法必须有了实例对象才能调用。因此在静态方法中引用非静态方法是不可能的。这是搜到其他博主的标准答案，但是我的解决很离谱。一、为什么不能引用？
Java无法从静态上下文中引用非静态方法
热门推荐
Xu_Lisa的博客
10-17 2万+
The First 这个问题出现在类的方法上。 最简单的解决方案就是在报错的方法前加上 static： 栗子：public void Function()——&amp;gt;public static void Function() 更深层次的理解如下 首先要知道的是： 静态的方法可以在没有创建实例时使用,而申明为非静态的成员变量是一个对象属性,它只有在对象存在时引用,因此如果在对象未创建实例时我们在静态...
CSS3属性之text-indent文本缩进使用详解
qq_43248623的博客
08-06 1万+
1、定义：text-indent 属性规定文本块中首行文本的缩进。 2、使用： 将段落的第一行缩进2em： div{text-indent:2em;} 注意: 1em等于一个汉字的大小 3、注意事项： 3-1、允许使用负值。如果使用负值，那么首行会被缩进到左边。 3−2、使用text−indent不生效的原因以及解决办法：\color{red}{3-2、使用text-indent不生效的原因以及解决办法： }3−2、使用text−indent不生效的原因以及解决办法： 原因:text-indent无法作用
CSS 首行缩进两个文字
09-25
我记得过去刚开始学习制作页面的时候，要想让一段文字首行缩进两个文字.
PowerPoint中文本缩进首行缩进悬挂缩进设置详解PPT教案.pptx
10-02
首行缩进设置是指对文本首行的缩进设置，通过设置“首行缩进”数值可以控制文本首行的缩进距离。当“首行缩进”数值设置为非零值时，文本首行将右移相应的距离。 例如，在 PowerPoint 中，我们可以设置“首行缩进”...
tinymce 首行缩进插件
02-15
"indent2em"这个文件很可能是该首行缩进插件的主要实现部分，它的命名暗示了插件可能默认将首行缩进设置为2个字符单位（通常一个字符单位等于半角空格的宽度，即1em）。 使用这个插件的过程大致如下： 1. **下载与...
springboot无法从静态上下文中引用非静态变量的解决方法
08-25
主要介绍了springboot无法从静态上下文中引用非静态变量的解决方法,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
自定义TextView实现首行缩进
01-09
在HTML中，我们可以使用`<p>`标签配合`text-indent`属性来实现这一效果，但在Android的原生TextView中，我们没有直接的API来设置首行缩进。因此，我们需要自定义一个TextView类，并在其内部实现这个功能。 下面我们...
首行文字缩进text-indent
16个夏天。。。
12-23 6342
text-indent:2em; 解释一下：text的意思是文本，indent在计算机英语中意思是缩进，至于后面的2em意思就是2个相对单位； em又是什么单位？ em这个单位的意思就是文字的高度，1em就是1个文字的高度，2em就是两个文字高度，所以我们写的“text-indent:2em;”的意思就是，文本缩进2个文字的高度，因为汉字是方块字，高度和宽度是一样的，所以缩进2个文字的高度，
首行缩进
web全栈开发的博客
12-10 2902
/* em 是一个单位，根据父元素的font-size的值来确定em的值的大小 例如：font-size:20px; 1em = 20px;2em = 40px; / / 首行缩进：text-indent: 1）text-indent可以取负值，可实现隐藏文本，悬挂缩进。 2）text-indent属性只对第一行起作用. */ text-indent:2em; ...
text-indent——首行缩进
susanzxl的专栏
05-12 768
1.text-indent所在的元素是行内元素而非块级元素。比如用在span,a等行内元素上; 解决方案： 在行内元素加上display:block; 或者把目标元素放入等块级元素，然后把text-indent 样式应用到等块级元素。 2.text-indent所在的元素未使用overflow属性; 解决方案： 在元素加上overflow:hidden; 3.text-ind
设置首行缩进
zww学习笔记
07-27 6203
主要使用TextKit方法。 具体代码如下：NSMutableParagraphStyle *paraStyle01 = [[NSMutableParagraphStyle alloc] init]; paraStyle01.alignment = NSTextAlignmentLeft; //对齐 paraStyle01.headIndent = 0.0f;//行首缩进
文本第一行的缩进 text-indent
tiandaochouqin_1的博客
02-12 582
p {text-indent:2em;}  /*此时2em就是两个汉字的宽度*/   1em 就是一个字的宽度，如果是汉字段落，1em就是一个汉字的宽度。
text-indent:2em详解
weixin_34249367的博客
08-20 2010
text-indent:2em;　　解释一下：text的意思是文本，indent在计算机英语中意思是缩进，至于后面的2em意思就是2个相对单位；　　　　em又是什么单位？　　　　em这个单位的意思就是文字的高度，1em就是1个文字的高度，2em就是两个文字高度，所以我们写的“text-indent:2em;”的意思就是，文本缩进2个文字的高度，因为汉字是方块字，高度和宽度是一样的，所以缩进2个文字...
Word vba首行缩进设置
05-26
如果要将整个文档中所有段落的首行缩进设置为1厘米，可以使用以下代码： ```vb Sub SetFirstLineIndentForAllParagraphs() Dim i As Integer For i = 1 To ActiveDocument.Paragraphs.Count ActiveDocument....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值