css字体缩进

CSS 字体缩进基础概念

CSS（层叠样式表）中的字体缩进通常指的是文本的对齐方式，特别是段落的首行缩进。这可以通过 text-indent 属性来实现。

类型

首行缩进：最常见的类型，只缩进段落的第一行。
悬挂缩进：缩进除第一行外的所有行。

应用场景

文章和博客：在长篇文章或博客中，使用首行缩进可以使内容更加清晰易读。
报告和文档：在正式的报告或文档中，适当的缩进可以提升整体的专业感。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 字体缩进示例</title>
    <style>
        p {
            text-indent: 2em; /* 首行缩进两个字符宽度 */
        }
    </style>
</head>
<body>
    <p>这是一个首行缩进的示例。通过使用 CSS 的 text-indent 属性，我们可以轻松地实现文本的首行缩进。</p>
</body>
</html>

参考链接

MDN Web Docs - text-indent

常见问题及解决方法

问题：为什么设置了 `text-indent` 但没有效果？

原因：

选择器错误：确保选择器正确地选中了需要缩进的元素。
单位错误：text-indent 的值需要带有单位，如 em、px 等。
样式覆盖：可能有其他样式覆盖了你的 text-indent 设置。

解决方法：

检查选择器是否正确。
确保 text-indent 的值带有正确的单位。
使用 !important 强制应用样式，但应谨慎使用。

p {
    text-indent: 2em !important;
}

问题：如何实现悬挂缩进？

解决方法：可以使用 margin-left 和 padding-left 结合来实现悬挂缩进。

p {
    padding-left: 2em;
    text-indent: -2em;
}

通过以上方法，可以有效地解决 CSS 字体缩进相关的问题，并提升页面的可读性和美观性。

页面内容是否对你有帮助？

有帮助

没帮助

任何方法来设置和等效CSS“文本缩进”属性，但基于字体？

、

由于某种原因，“文本缩进”的值是许多像素。但是不同的字体需要不同程度的缩进。我希望避免每次更改字体时都要记住设置正确的缩进，如果意思是“在当前字体中添加与此文本等效的像素”。然后，文本缩进将是相同的，在每一个字体。CSS中有什么东西可以达到这种效果吗？

浏览 2提问于2014-12-14得票数 1

回答已采纳

3回答

使用CSS增加字体大小会产生不必要的缩进。

、

然后使用CSS，特别是对唯一标记的类，我想增加字体大小。这是我的CSS中的一行结果是大文本，但它随后缩进文本。使用firebug，添加和删除此参数，既可以减小字体大小，也可以删除缩进。编辑:我试过它们和像素，也在Chrome和Firefox上测试过。Edit2:这是专门针对Wordpress Widget的CSS。当我使用

浏览 1提问于2013-09-02得票数 1

回答已采纳

1回答

是否以多行文本中的特定行为目标？

、、、

最初的问题是，我需要使字体的斜体比斜体字体小，但仍然比正常情况下更斜体。只有这两种字体可供选择，但我需要介于两者之间的东西，而且据我所知，没有其他方法可以使用font-style属性手动设置字体的倾斜。看看这张照片，你就会明白我的意思：正如您所看到的，转换使其在每一行上看起来更加缩进。解决方案是针对特定的行并使用负边距(或文本缩进</e

浏览 1提问于2012-10-12得票数 1

回答已采纳

2回答

不接受<style>和@import方法的Gmail

、

我试图创建一个电子邮件模板，但经过几次测试和阅读，我发现Gmail不支持<style></style>标记或CSS中的@import元素。我在电子邮件中缩进使用的字体是"Gotham Rounded A"，它不是一种公开可用的字体，这就是为什么我试图使用CSS中的@import url()将字体放入电子邮件中。有谁知道的解决方案，允许我在电子邮件模板中使用这个字体吗？

浏览 6提问于2015-02-22得票数 1

回答已采纳

1回答

如何使用FOP在XML-FO中指定2 2ch的缩进

、

我试图在XML文档中创建一个带有固定宽度字体的两个字符的缩进。我正在用FOP翻译它。不幸的是，当我指定像"2ch"这样的长度时，FOP会产生以下错误消息：XML文档声明允许任何CSS已知长度单位，CSS指定ch是0字符的宽度。但它表示(即使使用固定宽度的字体单空间)宽度约为1.5个字符。是否有一个完

浏览 3提问于2017-09-16得票数 4

回答已采纳

1回答

我在微小的MCE配置中添加了缩进和输出按钮，如下所示： tinyMCE.init({ //一般选项模式："textareas"，主题：“高级”，editor_selector : cl2，皮肤："o2k7合并字段“，spellchecker_languages："+English=en"，//主题选项theme_advanced_buttons1：”粗体、斜体、下划线、下划线、预言板、背景色、通配符、字体选择、字体选择、代码、远程格式、向导、空格检查器

浏览 6提问于2014-11-13得票数 0

回答已采纳

2回答

如何将挂起缩进添加到带有CSS中自定义图标的复选框的标签上？

、、、、

我正在尝试自定义我的复选框的外观使用字体-令人敬畏，并使标签的所有文本正确缩进。我已经定制了复选框的外观，这使得通常的方法无法缩进文本，因为我隐藏了实际的复选框(参见下面的CSS )。目前，我得到以下(左)，而我想要右边的：我使用了以下代码(请参阅)：受此的启发，我使用以下方法将复选框格式化为字体-太棒了：非常感谢您的帮助！

浏览 3提问于2015-05-26得票数 11

回答已采纳

7回答

您如何判断哪些CSS设置正在影响布局？

、

我有一个带有几个CSS文件的项目，每个文件都有许多不同的设置。每隔一段时间，我会在页面上放置一个元素，它会意外地出现，比如奇怪的缩进、字体颜色、悬停行为等。有没有办法确切地知道哪些CSS值被应用于给定的元素？

浏览 0提问于2009-11-03得票数 0

回答已采纳

2回答

HTML + CSS:在图标后面缩进一个段落

、、、、

我想显示一个字符并在它后面缩进一个段落-就像在这里的图表中一样：使用图标字体(@字体-face)将单个字符呈现为图标。有没有人对如何使用HTML + CSS来做这件事有任何建议？

浏览 4提问于2012-09-26得票数 3

回答已采纳

5回答

如何使用CSS设置代码清单的样式？

、

我想使用CSS在HTML文档中显示编程语言代码片段，以及HTML代码。我想让它缩进并使用固定宽度的字体...我在想像这样的东西：my code here</blockquote如何使用CSS来完成此任务？

浏览 5提问于2010-10-23得票数 71

2回答

仅使用JavaScript复制CSS规则

、

缩进级别是通过& nbsp;，但是每个缩进的字体大小都是相同的，我想根据缩进级别更改字体大小。因此，我需要复制一个css规则并更改新的id和font-size。以下是HTM生成的代码，我无法更改： span.text12Font1 { font-family我需要的是能够复制一个css类，

浏览 2提问于2015-11-19得票数 0

6回答

如何缩进一段？

、

在网上，段落通常是这样的：

浏览 8提问于2013-10-02得票数 1

1回答

如何在一个页面上使用两种不同的字体？

、、、、

在全局css中，我设置了一个字体系列，例如Helvetica, Tahoma, Arial, monospace。同时，我的页面上有一个编辑器实例，我希望使用另一种字体，如"Fira Code", monospace。我在编辑器的选项中设置了它。编辑器显示此字体。但在这一点上出现了一个问题，编辑器在测量字体宽度时使用的是全局字体。所以当renderWhitespace和显示缩进指示器时，就会出现错误。我认为这与选择测量使用的字体有关

浏览 33提问于2021-11-15得票数 1

1回答

如何在rails视图中加载字体-令人敬畏的图标？

、、、

这可能是一个愚蠢的问题，但我无法弄清楚如何在rails视图中使用字体令人敬畏的图标。xyz"> </a>我还包括 <%= stylesheet_link_tag "icons.min.css

浏览 2提问于2015-11-02得票数 0

1回答

两种颜色

、

sifr-config.js selector: 'h1', wmode: 'transparent', forceSingleLine: true, css

浏览 2提问于2010-10-11得票数 0

1回答

如何在drupal 9中的<head>中加载依赖项？

但它不起作用 version: VERSION js/bootstrap.min.js: {} component: dependencies: - core

浏览 0提问于2022-11-07得票数 -2

回答已采纳

1回答

如何使用java打开.doc或.docx文件并检查文本格式

、、

我想通过java打开一个.doc (或.docx)文件，检查部分文本的字体-系列，部分文本的字体大小，表格和表的描述，右缩进，左缩进等等。在java中有任何库和.jar文件吗？

浏览 0提问于2016-11-10得票数 1

回答已采纳

1回答

如何让js-mode正确地缩进continued (复合？)var声明？

、

happens only when the height of the elt is constrained $('#out').css如果我遵循这个建议，JSLint会很高兴，但是Emacs的内置js-mode.el (Emacsv23.2)没有按照我想要的方式缩进额外的var声明。此外，它不会对其他变量执行font-lock。scrollbar happens only when the height of the elt is constrained s

浏览 0提问于2011-09-08得票数 9

回答已采纳

2回答

格式化的首字母会造成文本中的空白

、

我在我的网页中使用这些google字体(我也在使用Bootstrap --不知道这是否会改变什么，我对这个编码有点新手)：.initial { font-familyp {}<link href='https://fonts.googleapis.com/css/css?<&#x

浏览 0提问于2015-11-23得票数 1

1回答

是否可以为vscode创建一个扩展来更改编辑器的CSS？

、

更改标题行的字体大小。您知道如何根据规则更改编辑器的CSS吗？此外，如果您有一个链接到扩展，这样做可能会有所帮助。换句话说，：vscode扩展如何更改编辑器窗口的css样式？

浏览 1提问于2019-07-10得票数 1

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

css字体缩进