`
whoami0508
  • 浏览: 8697 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

css样式控制首行缩进

阅读更多

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

在这里我们需要了解一种长度单位em。em是相对长度单位。相对于当前对象内文本的字体尺寸。我们中文段落一般每段前空两个汉字。实际上,就是首行缩进了2em

<style type="text/css">
<!--
p{
text-indent: 2em; /*em是相对单位,2em即现在一个字大小的两倍*/
}
-->
</style>
<p>段落前面空两个字的距离,不要再使用空格了。应该使用首行缩进text-indent。长度单位em。相对于当前对象内文本的字体尺寸。我们首行缩进了2em。2em即现在一个字大小的两倍。</p>

-----------------------------------------------------------------------------------------------------------------

用CSS实现段落首缩进两个字符,实现首行缩进的通用方法是加四个小角空格。

其实呢,用CSS样式来定义更为高效。

比如在style里定义如下缩进样式:.suojin{text-indent:2em}

在需要缩进的地方使用class="suojin"即可,比如用一个div定义一整块段落首先缩进,

凡在div区域里,浏览器一碰上p语句(即一个新段的开始),就会执行.suojin所定义的缩进。

也可以在正文中使用嵌入式CSS样式来定义,下面举个实例(使用时请将尖括号改为小角尖括号):

<div style="text-indent:2em">
<p>段落一</p>
<p>段落二</p>
<p>段落三<p>
</div>

两种方法各有长处短处,可根据需要决定使用哪一种方法。

注:div标签不要忘记起始符。text-indent只对p或div标签有效对br标签不生效,原因是br标签是换行标签不是分段标签。

分享到:
评论

相关推荐

    dreamweaver怎么设置段落首行自动缩进两个字符?

    在使用Dreamweaver进行网页设计时,首行缩进是一种常见的排版需求,目的是让文本段落更加美观,易于阅读。首行缩进通常指的是让段落的第一行向右偏移一定的距离,以区别于其他行。在Dreamweaver中实现首行缩进的方法...

    CSS实现段落首行缩进两个字符不再使用空格

    总的来说,CSS的`text-indent`属性为实现段落首行缩进提供了一种标准且灵活的方式,无论是在传统的两字符缩进需求,还是在其他自定义缩进场景中,都能够有效地满足需求。根据项目的需求和编码规范,可以选择合适的...

    jquery Word格式整理去掉无用空格和首行缩进效果代码

    首行缩进的去除通常涉及到找到段落(`&lt;p&gt;`标签)并移除首行的额外空格或者调整CSS样式来取消首行缩进。在jQuery中,可以使用`.css()`方法来设置或改变元素的样式。例如: ```javascript $('p').css('text-indent', ...

    tinymce 首行缩进插件

    你可以通过TinyMCE的API来实现,例如设置CSS样式或使用插件提供的配置项。 5. **测试与调试**:在完成以上步骤后,你需要在浏览器中测试插件是否正常工作。如果遇到问题,可以查看浏览器的开发者工具中的错误日志,...

    jquery Word 格式整理去掉无用空格和首行缩进效果代码

    对于首行缩进,Word通常通过设置段落样式来实现。如果文本已转换为HTML,我们可以查找特定的CSS类或属性,然后应用jQuery来清除这些样式。例如,如果缩进通过`text-indent`属性实现,可以这样做: ```javascript $...

    CSS 首行缩进两个文字

    这一要求通过在div元素的style属性内嵌入CSS样式来实现,如下所示: ```html ; text-indent: 2em; border: 5px solid #999; font-size: 12px;"&gt; 第一段文字内容... 第二段文字内容... ``` 上述代码中,`...

    用CSS实现文本左右对齐且首行缩进的代码

    CSS(Cascading Style Sheets,层叠样式表)是网页设计的核心技术之一,它用于控制网页上的内容展示,包括布局、颜色和字体等。对于文本的对齐方式及格式化,CSS提供了多种属性,可以实现文本的左右对齐,并进行首行...

    jquery word格式排版整理代码.zip

    4. **CSS样式调整**:Word的样式可以通过CSS来模拟,例如字体、字号、颜色、边距等。代码可能创建了一个CSS规则集,将Word的样式映射到对应的HTML元素上。 5. **事件处理与交互**:由于这是“JS特效-其它代码”标签...

    UMeditor可实现tab缩进控制

    在标题和描述中提到的“实现tab缩进控制”,意味着开发者或社区成员已经对UMeditor进行了自定义改造,通过添加或调整代码,使得在使用编辑器时按下tab键能够实现文本的缩进。这样的功能对于程序员或者需要格式化文本...

    obsidian修改了的主题和常用的插件

    你可以通过“设置”&gt;“主题”进入主题选择界面,选择“自定义CSS”选项,然后在弹出的代码编辑器中添加或修改CSS样式代码。例如,你可以调整背景色为柔和的灰色,字体为易读的开源字体,甚至改变侧边栏的布局和图标...

    用CSS实现段落前面缩进两个字.rar

    应该使用首行缩进text-indent。text-indent可以使得容器内首行缩进一定单位。比如中文段落一般每段前空两个汉字。 在这里我们需要了解一种长度单位em。em是相对长度单位。相对于当前对象内文本的字体尺寸。我们中文...

    asp.net 设置段落缩进源码

    1. **HTML/CSS方法**:在HTML中,我们可以使用内联样式或外部CSS样式表来设置段落的缩进。例如,在`&lt;p&gt;`标签中添加`style`属性,设置`text-indent`属性: ```html ;"&gt;这是一个缩进两字符的段落。 ``` 2. **VB.NET...

    VB 设置段落缩进

    在VB(Visual Basic)编程环境中,设置段落缩进通常是指在处理文本或者与文档编辑相关的应用程序中,调整文本块的首行缩进或者整体缩进。这涉及到对文本对象或者控件的操作,例如RichTextBox或Word文档。下面将详细...

    tailwindcss-text-indent:Tailwind CSS的文本缩进实用程序

    Tailwind CSS文本缩进插件 该插件添加了实用程序,可将文本缩进与Tailwind CSS一起使用。 安装 将此插件添加到您的项目中: # Install using pnpm pnpm install --save-dev tailwindcss-text-indent # Install ...

    CSS样式表高效使用的技巧

    打开 DreamWeaver 的设计界面,在该界面中找到 CSS 的属性定义对话框(Style Definition for .style1),在该对话框的“Block”标签下的“text-indent”属性定义设置项中来设置“首行缩进”功能。 5. 巧用 CSS 来...

    css样式表使用技巧

    【CSS样式表使用技巧】 CSS(Cascading Style Sheets)是一种用于定义网页中元素样式和布局的语言,它极大地提高了网页设计的效率和可维护性。本文将分享一些关于CSS高效使用的方法和技巧。 1. **多种引入方式的...

    indent2em.zip

    在HTML中,我们可以使用`&lt;p&gt;`标签定义段落,并在关联的CSS样式表中设置首行缩进。例如,下面的CSS规则将所有段落的首行缩进设置为2em: ```css p { text-indent: 2em; } ``` 这意味着每个段落的第一行会向右...

Global site tag (gtag.js) - Google Analytics