当前位置: 首页 > news >正文

html 首行缩进2字符

1. html 首行缩进2字符

1.1. 场景

  在Html开发中让一段文字(富文本等)首行缩进两个文字,可能在前面加上8个“ ”,因为过去对CSS不熟悉,这种方法实现虽然比较直接,但是文字多的时候会有很多“ ”充斥在代码中,代码会显得比较乱,现在我们实现这种效果就简单多了,直接在CSS样式代码中加入。可以使用text-indent属性来设置段落空两格,只需要给元素设置“text-indent:2em;”样式即可。text-indent属性规定文本块中首行文本的缩进,该属性允许使用负值;如果使用负值,那么首行会被缩进到左边。

text-indent:2em;

  这样就很容易实现文本段落的缩进
在这里插入图片描述

1.2. 说明

 <div style="text-indent:2em;" class="news-content" id="news_content"></div>;

1.2.1. text-indent:2em;

  text的意思是文本,indent在计算机英语中意思是缩进,至于后面的2em意思就是2个相对单位;

1.2.2. em

  em这个单位的意思就是文字的高度,1em就是1个文字的高度,2em就是两个文字高度,所以我们写的“text-indent:2em;”的意思就是,文本缩进2个文字的高度,因为汉字是方块字,高度和宽度是一样的,所以缩进2个文字的高度,就等于缩进两个文字的宽度,最后的效果就是缩进了两个文字。

1.2.3. 适用范围

  对于"text-indent:2em;"属性,使用CSS的text-indent属性可以定义文本段落中的首行字体缩进的效果。使用该属性只对元素中的段落产生影响。对于使用,标签产生的换行效果,并不起作用。只能加在块状元素上面,内联元素是不起作用的。

1.3. 使用

  在CSS样式表中设置文本首行缩进的样式规则。代码如下:

div{
text-indent:2em;
font-size:29px;
width:900px;
}

  div标签选择器使用text-indent属性将段落首行缩进2em,这是两个汉字字符的宽度。使用font-size属性将字体大小设置为29px,使用width属性将div元素的宽度设置为900px,都是为了使效果能够更好地显示。

  在HTML网页中添加要使用标签选择器的div元素内容。代码如下:

<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>缩进2字符</title><style type="text/css">p {text-indent: 2em;font-size: 29px;width: 900px;}</style>
</head>
<body>
<p>测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据!</p>
<p>测试!</p>
</body>
</html>

在这里插入图片描述

http://www.lryc.cn/news/428784.html

相关文章:

  • 什么是IP?
  • js拖拽交换元素位置
  • 在 C++ 中实现自定义容器的实用指南
  • 《深入浅出WPF》读书笔记.4名称空间详解
  • 电驱动总成
  • JavaScript class和正则
  • [Linux#42][线程] 锁的接口 | 原理 | 封装与运用 | 线程安全
  • 奇异递归Template有啥奇的?
  • 每天五分钟深度学习框架pytorch:神经网络工具箱nn的介绍
  • 【办公软件】安全风险 Microsoft 已阻止宏运行,因为此文件的来源不受信任
  • JavaScript语法基础之流程结构(顺序、选择、循环结构)
  • 集团数字化转型方案(四)
  • 【MySQL索引】索引失效场景
  • 基于MATLAB视觉的静态手势识别系统
  • day02-作业题
  • torch.cuda.set_divice()
  • <数据集>RSOD数据集<目标检测>
  • 企业高性能web服务器之Nginx
  • 11-sentinel利用nacos作持久化
  • 密码学之哈希算法
  • 杰发科技AC7801——GPIO通过寄存器地址控制高低电平
  • 代码随想录算法训练营第三十一天| 01背包问题 二维 01背包问题 一维 416. 分割等和子集
  • github删除历史所有commit
  • C++前向声明简介
  • 华为手机是越贵越好吗?
  • 【java基础】IDEA 的断点调试(Debug)
  • MPLS相关实验
  • 从零开始学习SLAM(五):极几何与极约束
  • Freertos学习笔记
  • 线程(Thread)的使用方法和锁(同步代码块,lock锁)的问题