【CSS】段落首行缩进2个字符,更符合中文的排版样式 您所在的位置:网站首页 首行缩进怎么设置 【CSS】段落首行缩进2个字符,更符合中文的排版样式

【CSS】段落首行缩进2个字符,更符合中文的排版样式

2024-06-17 08:21| 来源: 网络整理| 查看: 265

检索关键字: CSS css snippets 段落 首行 缩进 字符 中文 排版 样式

以下CSS代码可以让Markdown文档像Word文档那样对段落首行(也包括段落中每个回车换行后的首行)缩进2个字符,这样更符合中文的排版样式。阅读模式和编辑模式都可正常使用。

缩进效果如下图:

屏幕截图 2024-02-01 200738屏幕截图 2024-02-01 200738537×545 104 KB

阅读模式下, 段落中每个回车换行后的首行也如编辑模式那样进行缩进。但每个人使用的主题各异,缩进可能会没有缩进整齐。在CSS代码中,Unicode字符编码\0009表示水平制表符,\00A0表示不换行空格,大家可通过增减、组合搭配这两个Unicode字符来微调回车换行后的首行缩进量。

另外,根据中文样式,一些内容无需缩进,CSS代码中已经做出下列排除项:

标题 引用 列表 表格 当前编辑空行

大家在日常使用中有发现其他需要排除项才更符合中文的排版样式的,请跟帖说明。

CSS代码:

/* === 段落-首行缩进2个字符 By Linzeal 2024/2/1更新 === */ /* 也包括段落中每个回车换行后的首行缩进 */ :is( .markdown-source-view .cm-line:not(:is(:has(>.cm-hmd-frontmatter,>br),.HyperMD-header,.HyperMD-list-line,.HyperMD-quote,table .cm-line)), /* 编辑模式 */ .markdown-rendered :not(:is(blockquote)) > p /* 阅读模式 text-indent不支持each-line的办法 */ ){ text-indent: 2em !important; } .markdown-rendered :not(:is(blockquote)) > p { /*text-indent: 2em each-line !important; 若支持each-line参数则用这个即可,更为简单,就无需下面的修正 */ } /* 阅读模式下对每个回车换行后的首行缩进的修正 */ .markdown-rendered :not(:is(blockquote)) > p > br { content:''; white-space:pre; } .markdown-rendered :not(:is(blockquote)) > p > br::after { content:'\000A\0009\00A0\00A0'; /* Unicode字符编码\0009表示水平制表符,\00A0表示不换行空格,可通过增减、组合搭配这两个Unicode字符来微调回车换行后的首行缩进量 */ } /* === CSS代码结束 === */


【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有