在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. 温故知新-快速理解zookeeper功能&应用&选举机制

    文章目录 zookeeper简介 什么是zookeeper zookeeper应用场景 zookeeper特点 zookeeper的角色 zookeeper的数据模型 节点数据结构 节点类型 zook ...

  2. android在service中stopself遇到的问题

    在service的oncreate中直接调用stopservice停止自己,依然会执行onstartcommand方法后,最后才调用ondestory方法

  3. git提交代码托管平台流程

    首先先安装git git官网 ---- https://git-scm.com/ 下载好傻瓜式安装即可 安装好过后,再桌面任意空白区域右键,看到以下两个选项即为安装成功 一般都用第二个选项也就是 Gi ...

  4. 需要加token验证的接口返回文件流下载

    没有加token之前,下载文件用的是a标签,直接下载. 现在要求是需要在header中加入token. getDownload(urls, fileName) { var url = urls; va ...

  5. JDK Base64编解码1.7和1.8的坑

    场景 对接一个第三方api接口,其中签名部分用的是JDK8的编码.我们线上采用JDK7,导致项目无法编译 替换编解码部分为1.7的代码,然后签名又不对 所以坑就在这里,结论,1.7的编解码有换行符导致 ...

  6. Netty 中的内存分配浅析

    Netty 出发点作为一款高性能的 RPC 框架必然涉及到频繁的内存分配销毁操作,如果是在堆上分配内存空间将会触发频繁的GC,JDK 在1.4之后提供的 NIO 也已经提供了直接直接分配堆外内存空间的 ...

  7. [noi.ac省选模拟赛]第12场题解集合

    题目 比赛界面. T1 数据范围明示直接\(O(n^2)\)计算,问题就在如何快速计算. 树上路径统计通常会用到差分方法.这里有两棵树,因此我们可以做"差分套差分",在 A 树上对 ...

  8. Node.js环境安装

    为其他使用先小小的接触这个环境,如不出意外,未来的一些时候抽时间会系统的学习element-ui, JavaScript, vue, node.js, 稍后也做个简易的ACE Editor体验一下 1 ...

  9. Spark GraphX从入门到实战

      第1章 Spark GraphX 概述 1.1 什么是 Spark GraphX   Spark GraphX 是一个分布式图处理框架,它是基于 Spark 平台提供对图计算和图挖掘简洁易用的而丰 ...

  10. windows server2012 安装SQL SERVER 2016环境监测出错

    Windows Server 2012 R2 安装SQL Server 2016 顺序为:KB2919442 ——> KB2919355 ——> SQL Server 2016 并且还要安 ...