当前位置: 首页 > 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>

在这里插入图片描述

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • python语言day7 函数式编程 面向对象编程
  • android13顶部状态栏里面调节背光,不隐藏状态栏面板
  • CDD数据库文件制作(十一)——服务配置(0x19_DTC Code)
  • 【Qt开发】QSerialPort串口配置、发送、接收回调函数 多线程接收的串口类封装
  • 【python基础】—离线环境下,在linux中安装python包(以sqlalchemy为例)
  • SpringBoot获取不到Nacos配置信息报错,Nacos鉴权
  • 基于Python的上市公司年报数字化词频统计:深入解析与实战
  • 倒计时:可添加可删除的倒计时函数
  • 从零开始手写STL库:Map
  • C++:list类(迭代器)
  • Spring SSM框架--MVC
  • [数据集][目标检测]手钳检测数据集VOC+YOLO格式141张1类别
  • 一:《Python基础语法汇总》— 数据类型与输入输出
  • sql总结
  • C++入门——21特殊的类
  • 【5+】跨webview多页面 触发事件(二)
  • chrome扩展demo1-小时钟
  • ES6系统学习----从Apollo Client看解构赋值
  • JavaScript类型识别
  • Java教程_软件开发基础
  • niucms就是以城市为分割单位,在上面 小区/乡村/同城论坛+58+团购
  • PAT A1120
  • React Native移动开发实战-3-实现页面间的数据传递
  • Stream流与Lambda表达式(三) 静态工厂类Collectors
  • vue 配置sass、scss全局变量
  • vue从创建到完整的饿了么(18)购物车详细信息的展示与删除
  • 官方解决所有 npm 全局安装权限问题
  • 近期前端发展计划
  • 你真的知道 == 和 equals 的区别吗?
  • 微信小程序--------语音识别(前端自己也能玩)
  • 微信支付JSAPI,实测!终极方案
  • 我看到的前端
  • 写给高年级小学生看的《Bash 指南》
  • 原生JS动态加载JS、CSS文件及代码脚本
  • ​​​​​​​GitLab 之 GitLab-Runner 安装,配置与问题汇总
  • ​DB-Engines 12月数据库排名: PostgreSQL有望获得「2020年度数据库」荣誉?
  • $.ajax中的eval及dataType
  • (52)只出现一次的数字III
  • (javaweb)Http协议
  • (M)unity2D敌人的创建、人物属性设置,遇敌掉血
  • (附源码)springboot码头作业管理系统 毕业设计 341654
  • (十二)devops持续集成开发——jenkins的全局工具配置之sonar qube环境安装及配置
  • (五)IO流之ByteArrayInput/OutputStream
  • (原創) 如何使用ISO C++讀寫BMP圖檔? (C/C++) (Image Processing)
  • (原創) 如何優化ThinkPad X61開機速度? (NB) (ThinkPad) (X61) (OS) (Windows)
  • (转) Face-Resources
  • (自用)仿写程序
  • ***linux下安装xampp,XAMPP目录结构(阿里云安装xampp)
  • .gitignore文件设置了忽略但不生效
  • .Net core 6.0 升8.0
  • .NET Framework 的 bug?try-catch-when 中如果 when 语句抛出异常,程序将彻底崩溃
  • .NET gRPC 和RESTful简单对比
  • .NET Standard 支持的 .NET Framework 和 .NET Core
  • .net 受管制代码
  • .net开源工作流引擎ccflow表单数据返回值Pop分组模式和表格模式对比