css div 悬挂缩进_CSS中的经典字体效果：悬挂缩进

css div 悬挂缩进

A hanging indent, or hanging paragraph, is a paragraph in which the opening line is left of the margin. In other words, the first line has a negative text indent, and that is exactly how it is created in CSS. First, our HTML markup:

悬挂缩进或悬挂段落是在空白处留有起始线的段落。 换句话说，第一行具有负的文本缩进，这就是在CSS中创建它的方式。 首先，我们HTML标记：

<p>Leverage agile frameworks to provide a robust synopsis for high level 
overviews. Iterative approaches to corporate strategy foster collaborative
thinking to further the overall value proposition.
<p>Bring to the table win-win survival strategies to ensure proactive domination. 
At the end of the day, going forward, a new normal that has evolved from 
generation X is on the runway heading towards a streamlined cloud solution. 
User generated content in real-time will have multiple touchpoints for offshoring.

Then the CSS code, written embedded or linked:

然后是嵌入或链接CSS代码：

p {
	text-indent: -4em;
}

Our immediate problem is that the element selector would apply the appearence to every paragraph. We need to restrict the effective range of the style to the first paragraph. The easiest way is with a first-of-type selector:

我们的直接问题是元素选择器会将外观应用于每个段落。 我们需要将样式的有效范围限制为第一段。 最简单的方法是使用first-of-type选择器：

p:first-of-type {
	text-indent: -4em;
}

This creates a problem of its own: the first line of our first paragraph is now likely to go off the left edge of the browser window. To compensate, push the paragraph to the right using margin-left:

这就产生了一个问题：我们第一段的第一行现在很可能偏离浏览器窗口的左边缘。 为了补偿，请使用margin-left将段落向右推：

p:first-of-type {
	text-indent: -4em;
	margin-left: 6em;
}

We probably want all the paragraphs to share the same left edge, so rather than applying the margin-left to only the first paragraph, we should apply it to all paragraphs, while balancing the margin on the right-hand side:

我们可能希望所有段落共享相同的左边缘，因此，我们应该将其应用于所有段落，同时平衡右边的空白，而不是仅对第一段应用margin-left空白。

p {
	margin: 6em inital;
}
p:first-of-type {
	text-indent: -4em;
}

翻译自: https://thenewcode.com/50/Classic-Typography-Effects-in-CSS-Hanging-Indent

css div 悬挂缩进