我有一大段的文本,分为<br>的子段落:

<p>
  Blah blah blah.
  <br/>
  Blah blah blah. Blah blah blah. Blah blah blah.
  <br/>
  Blah blah blah.
</p>

我想扩大这些分段之间的间隔,比如有两个<br>之类的。我知道这样做的正确方法是使用<p></p>,但现在我不能改变这个布局,所以我正在寻找css的解决方案。

我试着用display: block设置<br>的行高和高度,我也谷歌了一下,堆栈溢出了,但没有找到任何解决方案。在不改变布局的情况下,这可能吗?


当前回答

而不是

<br>,<br/>,<hr> or <span></span> and trying different CSS properties to these tag.

我做了,我把段落放在一个div中,并给它行高:2px

# html

<div class="smallerlineHeight">
   <p>Line1</p>
   <p>Line2</p>
</div>

#css

.smallerlineHeight {
    p {
        line-height: 2px;
    }
}

其他回答

我使用这些方法,但我不知道是否跨浏览器

方法一======

br {
    display:none;
}

或 ======方法二======

br {
    display: block;
    margin-bottom: 2px;
    font-size:2px;
    line-height: 2px;
}
br:before {
    display: block;
    margin-top: 2px;
    content: "";
}
br:after {
    content: ".";
    visibility: hidden;
    display: block;
}

或 ======方法三======

br:after { content: "" }
br { content: "" }
br {   
    content: "";
    margin: 2em;
    display: block;
    margin-bottom: -20px; 
 }

工作在Firefox, Chrome和Safari。 还没有在Explorer中测试。(windows平板电脑没电了。)

换行,字体大小在Firefox和Safari中是不同的。

我让它在IE7中工作通过使用解决方案的组合,但主要是包装在DIV中的Br奈杰尔和其他人建议。添加Id和运行在="服务器",所以我可以删除BR时,从复选框行删除复选框。

.narrow {
    display: block;
    margin: 0px;
    line-height: 0px;
    content: " "; 
}
<div class="narrow" run at="server"><br></br></div>

而不是

<br>,<br/>,<hr> or <span></span> and trying different CSS properties to these tag.

我做了,我把段落放在一个div中,并给它行高:2px

# html

<div class="smallerlineHeight">
   <p>Line1</p>
   <p>Line2</p>
</div>

#css

.smallerlineHeight {
    p {
        line-height: 2px;
    }
}

可能使用两个br标签是适用于所有浏览器的最简单的解决方案。但这是重复的。

<p>
content
</p>
<br /><br />
<p>
content
</p>
<br /><br />
<p>
content
</p>