css怎么首行缩排

html-css07

css怎么首行缩排,第1张

css怎么首行缩排 把 Web 页面上的段落的第一行缩排,这是一种最常用的文字格式化效果。CSS 提供了 text-indent 属性,该属性可以方便地实现文字缩排。

通过使用 text-indent 属性,所有元素的第一行都可以缩排一个给定的长度,甚至该长度可以是负值。这个属性最常见的用途是将段落的首行缩排。

如下面这个示例,会使首行缩排2em及两个汉字字元。

p {text-indent: 2em}

首行缩排2字元怎么设定 css

首行缩排2字元,可以使用CSS属性中的【text-indent】进行设定。

设定程式码如下:

<!DOCTYPE PUBLIC "-W3CDTD XHTML 1.0 TransitionalEN" ":w3./TR/x1/DTD/x1-transitional.dtd">

<xmlns=":w3./1999/x">

<head>

<meta -equiv="Content-Type" content="text/charset=utf-8" />

<title>缩排2字元</title>

<style type=text/css>

p{ text-indent:2em}

</style>

</head>

<body>

<p>首行缩排2字元的案例展示如下。需要多写几行看效果,需要多写几行看效果,需要多写几行看效果,需要多写几行看效果,需要多写几行看效果,需要多写几行看效果,需要多写几行看效果。</p>

</body>

</>

把 Web 页面上的段落的第一行缩排,这是一种最常用的文字格式化效果。

CSS 提供了 text-indent 属性,该属性可以方便地实现文字缩排。

通过使用 text-indent 属性,所有元素的第一行都可以缩排一个给定的长度,甚至该长度可以是负值。

这个属性最常见的用途是将段落的首行缩排。

所以在div中要使文字首行缩排可以这样写(假设div的class类名为text):

.text{text-indent:2em}

这样就可以实现首行文字缩排两个中文字元。

可以使用{text-indent:2em}进行首行缩排。

定义:

text-indent 属性规定文字块中首行文字的缩排。

注意点:

text-indent 可以使用px、rem、em作为缩排单位。区别如下:

1、px是缩排固定的画素距离,不会根据应用到的元素字型的大小而调整。

2、rem根据根元素设定的字号,缩排固定的距离,不会根据应用到的元素字型的大小而调整。

3、em会根据应用到的元素字型的大小来调整距离。

如:

p{text-indent:2emfont-size:18px}这种写法不管p里面的字号设定多大,p的首行总会缩排2个字的距离。也就是2*fontSize的距离p{text-indent:20pxfont-size:18px}假如p的字号改变为40px,那首行的缩排依然还是20px

关于首行缩排举例如下(根据你页面中字型的大小,如页面中字型是12px,缩排2个字元就是24px):

方法1: h2{text-indent:24px}

方法2:h2{padding-left:24px}

建议使用规范的首行缩排属性text-indent,谢谢!

css 首行缩排2字元怎么设定

你好使用css实现首行缩排其实很简单,使用text-indent属性即可。但是如果要缩排几个字元可以使用em单位,一般而言中文段首是缩排两个汉字,可以这么写:p { text-indent: 2em}自然,如果缩排两个字元(即:一个汉字),就可以这么写:p { text-indent: 1em}希望对你有帮助,如有疑问,请追问。望采纳~~

text-indent: 2em

具体方法:

新建一个html代码文件,然后在这个html代码页面上创建一个<div>,同时给这个<div>设置一个class类;然后在这个<div>中创建几个<p>,并个<p>添加上内容。

代码:

<div class="cont">

<p>顶顶顶顶顶顶顶顶顶顶顶顶顶顶多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多</p>

<p>的顶顶顶顶顶的顶顶顶顶顶</p>

<p>顶顶顶顶顶顶顶顶顶顶顶顶顶顶多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多</p>

</div>

设置样式。在<title>标签后面新建一个<style>,在这个<style>设置cont类的宽为400px,然后设置p标签的首行缩进为两个字符。如图:

代码:

<style>

.cont{

width:400px

}

.cont p{

text-indent: 2em

}

</style>

使用浏览器打开,即可看到首行缩进的效果。如图:

所有代码。直接复制所有代码,粘贴到新建html文件上,保存后使用浏览器打开即可看到所有效果。

代码:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>首行缩进</title>

<style>

.cont{

width:400px

}

.cont p{

text-indent: 2em

}

</style>

</head>

<body>

<div class="cont">

<p>顶顶顶顶顶顶顶顶顶顶顶顶顶顶多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多</p>

<p>的顶顶顶顶顶的顶顶顶顶顶</p>

<p>顶顶顶顶顶顶顶顶顶顶顶顶顶顶多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多</p>

</div>

</body>

</html>

扩展资料:

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

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

注意:在 CSS 2.1 之前,text-indent 总是继承计算值,而不是声明值。

用于定义块级元素中第一个内容行的缩进。这最常用于建立一个“标签页”效果。允许指定负值,这会产生一种“悬挂缩进”的效果。

所有浏览器都支持 text-indent 属性。

注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。

参考资料来源:百度百科:CSS text-indent

段落首字下沉 单纯从前端角度,可以实现的方法

1、before伪元素实现

2、使用标签控制

段落首字下沉 方法分析

第一种方法果断舍弃,原因在于,数据明显是从后台传递的,那么此时我们不可能确定后台会传递什么数据。

具体内容请详见:CSS样式 | 段落首字下沉