在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实现 蓝桥杯 历届试题 最大子阵

    问题描述 给定一个n*m的矩阵A,求A中的一个非空子矩阵,使这个子矩阵中的元素和最大. 其中,A的子矩阵指在A中行和列均连续的一块. 输入格式 输入的第一行包含两个整数n, m,分别表示矩阵A的行数和 ...

  2. java实现第四届蓝桥杯梅森素数

    梅森素数 题目描述 如果一个数字的所有真因子之和等于自身,则称它为"完全数"或"完美数" 例如:6 = 1 + 2 + 3 28 = 1 + 2 + 4 + 7 ...

  3. 官宣!ASF官方正式宣布Apache Hudi成为顶级项目

    马萨诸塞州韦克菲尔德(Wakefield,MA)- 2020年6月 - Apache软件基金会(ASF).350多个开源项目和全职开发人员.管理人员和孵化器宣布:Apache Hudi正式成为Apac ...

  4. LB服务,软LB的服务能力(下)

    [摘要] 现在常用的LB软件,主要是LVS和nginx.普通情况下,LVS主要负责四层负载均衡,nginx负责七层.当然,业界也有友商基于LVS做出了七层负载均衡.本篇主要讲一下LVS的工作模式及各种 ...

  5. 洛谷P1012 拼数 【题解】

    **原题链接** 题目描述 设有n个正整数(n ≤ 20),将它们联接成一排,组成一个最大的多位整数. 例如:n=3时,3个整数13,312,343联接成的最大整数为:34331213 又如:n=4时 ...

  6. 游戏开发之UI管理器(跨引擎)

    使用UI管理器的目的 使用单场景与zindex结合的方式管理UI. 能够隐藏底层UI达到优化效果. 很好的组织和管理UI. 跨引擎使用. 管理器分类 根据以往经验我开发了三种类型的管理器,队列管理器, ...

  7. 温故知新-多线程-深入刨析CAS

    文章目录 摘要 CAS是什么? CAS是如何实现的? CAS存在的问题? 你的鼓励也是我创作的动力 Posted by 微博@Yangsc_o 原创文章,版权声明:自由转载-非商用-非衍生-保持署名 ...

  8. Jenkins job docker 没有权限

    问题描述 基于docker使用jenkins 构建cicd,在执行docker build 的时候出现了权限的问题.具体报错如下 + REPOSITORY=10.0.0.100/library/wen ...

  9. mysql安装过程以及遇到问题的解决方法

    因为工作原因,配备了新电脑,需要装mysql,今天给大家分享一下安装的过程以及遇到的问题(在此仅介绍压缩包解压方式的安装) 1.准备mysql的压缩包(我使用的是5.7经典版本) 2.配置环境变量,这 ...

  10. js原型链、继承、this指向等老生常谈却依然不熟的知识点——记录解析

    开始记录学习过程—— 很详细的解析过程——https://juejin.im/post/5c72a1766fb9a049ea3993e6 借鉴阅读——https://github.com/KieSun ...