在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. ArrayDeque使用&实现原理分析

    ArrayDeque使用&实现原理分析 学习Okhttp实现源码时,发现其任务分发时用到了ArrayDeque.因此了解一下ArrayDeque的使用方式和实现原理. 一.Deque dequ ...

  2. centos6.5 安装 clickhouse

    概述:clickhouse是一个高性能的列式数据库,特点就是快快快,查询性能是mysql的100-1000倍,非常适合存储频繁写入的数据,比如:日志,用户事件记录.单表存储上亿甚至十几亿行数据库查询都 ...

  3. 使用FFT进行频谱分析

    import numpy as np import matplotlib.pyplot as plt from scipy.fftpack import fft fs=100 #采样频率 N=128 ...

  4. Spark-stream,kafka结合

    先列参考文献: Spark Streaming + Kafka Integration Guide (Kafka broker version 0.10.0 or higher):http://spa ...

  5. 01 . Docker原理部署及常用操作命令

    Docker的来源及构造: 容器是一种基础工具:泛指任何用于容纳其他物品的工具,可以部分或完全封闭,被用于容纳,储存,运输物品: 物品可以被放置在容器中,而容器可以保护内容物: 人类使用容器的历史有十 ...

  6. IE6 中png背景透明的最好方法

    应用方式:(网站尾部加上如下代码) <!--[if IE 6]> <script src="js/DDPngMin.js"></script> ...

  7. SpringMVC处理json的四个步骤

    导入相关的pom依赖 在springMVC的配置文件中开启MVC驱动,<mvc:annotation-driven /> 在处理ajax请求的方法上加上注解@ResponseBody 将要 ...

  8. 让LED程序在片外SDRAM中运行

    让LED程序在片外SDRAM中运行 一.引子 在前一篇文章中,我们已经成功点亮过LED了,为什么还要再重复一次呢? 我们已经知道,Mini2440开发板有两种启动模式:从NorFlash启动和从Nan ...

  9. 用了一年 TIM 移动版之后,我又换回了手机 QQ

    TIM,是一个很玄学的产品. 讲真,我很不喜欢 QQ 电脑版.一个原因是我很讨厌一直占着右上角这一行为:右上角是给关闭按钮实现盲操用的,QQ 这么一个聊天软件没有这么高的地位:二是我不喜欢它的多窗口: ...

  10. Stylus 之 网教通直播间整修

    暗色模式 效果 Mozilla 格式源代码 @-moz-document domain("fj.101.com") { * { transition: all .3s; } #wj ...