在HTML网页中通常一段文字都需要设置首行缩进两个文字，使页面更加美观，我们可以通过css实现这一效果，下面我们就来看一下使用css设置首行文字缩进的方法。

css可以使用text-indent属性来设置首行文字缩进，我们可以通过设置text-indent属性的属性值来设置缩进的大小。

示例：

设置首行文字缩进两字符：

<html>

<head>

<style type="text/css">

p {text-indent: 2em}

</style>

</head>

<body>

<p>

这是段落中的一些文本。

这是段落中的一些文本。

这是段落中的一些文本。

这是段落中的一些文本。

这是段落中的一些文本。

这是段落中的一些文本。

这是段落中的一些文本。

这是段落中的一些文本。

这是段落中的一些文本。

这是段落中的一些文本。

这是段落中的一些文本。

这是段落中的一些文本。

</p>

</body>

</html>

text-indent属性说明：

text-indent属性规定文本块中首行文本的缩进。

注释：允许使用负值。如果使用负值，那么首行会被缩进到左边。

属性值：

  • length 定义固定的缩进。默认值：0。

  • % 定义基于父元素宽度的百分比的缩进。

  • inherit 规定应该从父元素继承 text-indent 属性的值。

css如何设置首行文字缩进？的更多相关文章

  1. 如何将HTML页面中的文本设置首行缩进

    text-indent属性介绍 属性值单位 描述 em 比如:1em 就代表缩进1个字,2em缩进2个字...... 由于简单我就不过多的介绍了直接上代码了哦,注意:text-indent属性的值支持 ...

  2. 输出文章段落首行空格缩进在IE和chrome显示不一致的问题

    一般的编辑文章时,首行都缩进两格,而执行的操作则是一个tab键或者四个空格键,在html代码中体现的往往都是4个 然而我在输出时却发现了同样的html代码,在IE上显示的是缩进了一个字符,在chrom ...

  3. css —— 图片环绕+首行缩进

    1.利用css实现图片环绕文字的效果: 只需要给img标签设置float:left/right即可: 2.实现上段文字首行缩进两个字的效果: 使用 text-indent: 2em;即可(em为相对单 ...

  4. 关于css的text-indent首行缩进两个字符和图片缩进的问题

    段落前面空两个字的距离,不要再使用空格了.应该使用首行缩进text-indent. text-indent可以使得容器内首行缩进一定单位.比如中文段落一般每段前空两个汉字. <style typ ...

  5. div+CSS实现段落首行缩进两个字符

    段落前面空两个字的距离,不要再使用空格了,用CSS实现段落首缩进两个字符.应该使用首行缩进text-indent.text-indent可以使得容器内首行缩进一定单位.比如中文段落一般每段前空两个汉字 ...

  6. Div+Css实现段落首行缩进两个字符（text-indent标签）

    段落前面空两个字的距离,不要再使用空格了,用CSS实现段落首缩进两个字符.应该使用首行缩进text-indent.text-indent可以使得容器内首行缩进一定单位.比如中文段落一般每段前空两个汉字 ...

  7. css 一行或多行文字溢出以...的形式隐藏

    一行文字溢出以...形式隐藏 我需要隐藏... css代码如下: white-space:nowrap; text-overflow:ellipsis; overflow:hidden; 多行文字溢出 ...

  8. CSS中字距，词距，首行缩进，字体大小，排版相关问题的探讨

    先说明下,这是在谷歌浏览器下字体显示等问题做个研究,火狐下有点差异,不过火狐占有率低,而且显示的没有谷歌那么合理,不管它先.IE卡的要死,半死不活,也懒得深入研究这些细节,字体排版上不是强迫症,差别也 ...

  9. WordPress文章首行缩进

    WordPress后台编辑文章的时候会自动删除多余的空格,也就是说,你在后台编辑文章的时候添加的一些空格和换行在前台都是看不见的,都是被WordPress忽略了的,今天就讲讲怎么给所有文章添加首行缩进 ...

随机推荐

  1. java实现第六届蓝桥杯立方体自身

    立方变自身 题目描述 观察下面的现象,某个数字的立方,按位累加仍然等于自身. 1^3 = 1 8^3 = 512 5+1+2=8 17^3 = 4913 4+9+1+3=17 - 请你计算包括1,8, ...

  2. 从源码研究如何不重启Springboot项目实现redis配置动态切换

    上一篇Websocket的续篇暂时还没有动手写,这篇算是插播吧.今天讲讲不重启项目动态切换redis服务. 背景 多个项目或微服务场景下,各个项目都需要配置redis数据源.但是,每当运维搞事时(修改 ...

  3. [C#.NET 拾遗补漏]03：你可能不知道的几种对象初始化方式

    阅读本文大概需要 1.2 分钟. 随着 C# 的升级,C# 在语法上对对象的初始化做了不少简化,来看看有没有你不知道的. 数组的初始化 在上一篇罗列数组的小知识的时候,其中也提到了数组的初始化,这时直 ...

  4. 安装fail2ban,防止ssh爆破及cc攻击

    背景:之前写过shell脚本防止服务器ssh爆破,但是对于服务器的cpu占用较多,看来下资料安装fail2ban 可以有效控制ssh爆破 1:fail2ban 安装(环境:centos6  宝塔) y ...

  5. CSS3动画基础

    编写页面 记事本或SublimeText或vscode编写html: <html> <div id="box"></div> <style ...

  6. 58同城Java面试

    总结这一次面试失败的不冤 很多知识,都是了解.知道,而没有做到明白与彻底的弄懂 差距还是比较大的 以后要多来写总结,提升自己,争取早日被认可 说说今天面试的主要内容和问题吧 希望大家集思广益 面试职位 ...

  7. @gym - 100591D@ Fox Rocks

    目录 @description@ @solution@ @accepted code@ @details@ @description@ 给定 N 个点以及 P 条单向道路 Ai -> Bi,每条 ...

  8. Vugen使用技巧

    调整各种选项的超时时间

  9. Linux MySQL集群搭建之主从复制

    前期准备 准备两台Linux,一主,一从,具体Linux安装MySQL操作步骤:点我直达 集群搭建 注意事项 一主可以多从 一从只能一主 关闭主从机器的防火墙策略 chkconfig iptables ...

  10. CSS中link和@import的区别

    1.link属于HTML标签,而@import是CSS提供的 2.页面被加载时link会同时被加载:而@import引用的CSS会等到页面被加载完再加载 3.@import只在IE5以上才能识别,而l ...