从CSS段落的第二行开始缩进 [英] Indent starting from the second line of a paragraph with CSS

查看:1120
本文介绍了从CSS段落的第二行开始缩进的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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



我试过了

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

  p {
margin-left:200px;
}
p:第一行{
margin-left:0;
}

 (with position:relative;)
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。请将您的问题提交给我们,以便我们能够帮助您解决问题。< / 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。如果您希望获得最新的维修服务,请确保您的维修服务符合您的要求。< / span>

CSS

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

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





$ b

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


How can I indent starting from the second 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;
}

解决方案

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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆