用 CSS 从段落的第二行开始缩进

如何从段落的第二行开始缩进？

我试过了

p {
text-indent: 200px;
}
p:first-line {
text-indent: 0;
}

还有

p {
margin-left: 200px;
}
p:first-line {
margin-left: 0;
}

还有

(with position:relative;)
p {
left: 200px;
}
p:first-line {
left: 0;
}
187817 次浏览
小开
最佳答案

它仅仅是你想缩进的第二行，还是 来自第二行(即。悬挂缩进) ？

如果是后者，那么沿着这个 JSFiddle的思路做一些事情是合适的。

    div {
padding-left: 1.5em;
text-indent:-1.5em;
}
    

span {
padding-left: 1.5em;
text-indent:-1.5em;
}
<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div>


<span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</span>

此示例显示在 DIV 或 SPAN 中使用相同的 CSS 语法如何产生不同的效果。

小开

这对我很有效:

p { margin-left: -2em;
text-indent: 2em
}
小开

使左边距: 2em 左右将推动整个文本，包括第一行到右边2em。然后添加文本缩进(适用于第一行)为 -2 em 左右。.这将使第一行返回开始时没有空白。 我试过查名单标签

<style>
ul li{
margin-left: 2em;
text-indent: -2em;
}
</style>
小开

如果您的样式为 list < li > ，您可以使用“ text-along: initial”，并且后面的行将全部缩进。我知道这可能不适合您的需要，但是我想在更改标记之前看看是否有其他解决方案。.

我猜把第二行放进去也可以，但是需要人类的思考来使内容正确地流动，当然，还有强硬的分界线(这本身并不困扰我)。

小开

我需要缩进两行，以允许一个较大的第一个单词在一个段落。一个麻烦的一次性解决方案是将文本放在一个 SVG 元素中，并将其放置为与 < img > 相同的位置。使用 float 和 SVG 的 height 标记定义缩进的行数，例如。

<p style="color: blue; font-size: large; padding-top: 4px;">
<svg height="44" width="260" style="float:left;margin-top:-8px;"><text x="0" y="36" fill="blue" font-family="Verdana" font-size="36">Lorum Ipsum</text></svg>
dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
  • SVG 的高度和宽度决定了屏蔽的区域。
  • Y = 36是 SVG 文本基线的深度，与字体大小相同
  • 页边距-顶部允许 SVG 文本和准文本的最佳对齐方式
  • 这里用前两个词来提醒下行者需要注意

是的，它很麻烦，但是它也与包含 div 的宽度无关。

上面的答案是对我自己的查询的回答，允许 para 的第一个单词更大并且位于两行之上。要简单地缩进 para 的前两行，您可以使用以下单个像素 img 替换所有 SVG 标记:

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" style="float:left;width:260px;height:44px;" />
小开

有一个 CSS3的工作草案(希望很快)能让你写下:

p { text-indent: 200px hanging; }

注意: https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent


提交答案