使用CSS缩进段落的第二行 [英] Indenting the 2nd line of a paragraph with CSS

问题描述

我试过了

  p {text-indent：200px;} 
p：第一行{text-indent：0;} 
  

和

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

和

 （位置：相对;）
p {left：200px;} 
p：第一行{left：0 ;} 
  

任何想法？

解决方案

它字面上只是第二行要缩进，或是从

如果是后者，则 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。        
  

CSS

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

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

I'm curious how everyone would go about indenting the 2nd line of a paragraph.

I've tried

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

and

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

and

(with position:relative;)
p{left: 200px;}
p:first-line{left: 0;}

Any ideas?

Thanks!

解决方案

Is it literally just the second line you want to indent, or is it from the second line (ie. a hanging indent)?

If it is the latter, something along the lines of this JSFiddle would be appropriate.

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

This example shows how using the same CSS syntax in a DIV or SPAN produce different effects.

这篇关于使用CSS缩进段落的第二行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！