从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; } 

Answer 1

是字面意思就是你想要缩进的第二行，还是从第二行（即一个悬挂缩进 ）？

如果是后者，那么这个JSFiddle的东西就是合适的。

HTML

 <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> <br/><br/> <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> 

CSS

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

这个例子展示了如何在DIV或SPAN中使用相同的CSS语法产生不同的效果。

Answer 2

这对我工作：

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

Answer 3

使左边距：2em左右将包括第一行的整个文本推向右边2em。 比添加文本缩进（适用于第一行）为-2em左右..这会使第一行返回开始无边距。 我尝试了列表标签

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

Answer 4

如果你的风格列表

你可以“文本alignment：初始”和后续行将全部缩进。 我意识到这可能不适合您的需求，但我正在检查，看看是否有另一个解决scheme，然后我改变我的标记。

我想把第二行写在里面也会起作用，但是需要人们的思考才能使内容正常stream通，当然，还需要强硬的换行符（本身并不打扰我）。

Answer 5

我需要缩进两行，以便在段落中放大第一个单词。 一个繁琐的一次性解决scheme是将文本放置在SVG元素中，并将其定位为与<img>相同。 使用浮动和SVG的高度标签定义了多less行将被缩进，例如

 <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文本基线的深度，与font-size相同
• margin-top允许SVG文本和para文本的最佳alignment
• 在这里使用前两个单词来提醒下级需要护理

是的，这是麻烦的，但它也是独立于包含div的宽度。

上面的答案是我自己的查询，允许一个段的第一个单词是更大的，并定位在两行。 要简单地缩进一个段的前两行，你可以用下面的单个像素replace所有的SVG标签img：

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