如果在样式上区分自动换行与 <br> ?

卜卜口代码

以往文章都只有段落和换行两种行间距,对于某些喜欢用换行作为弱等级段落的人来说 自动换行与 <br> 混在一起就很难受😇,本文解决的是在样式上区分自动换行与 <br>

一开始尝试了很多不改变 DOM 结构的方向,但 <br> 标签本身和 headtitle 不同、虽然在 DOM 树中,但不存在任何样式,作用仅仅是替代 \n😕 所以给 <br> 覆盖样式没有任何作用。想要解决这个问题,我的方案还是要动态语言参与改变 DOM 结构才行。

方案

输出文章前对 HTML 格式化,在所有 <br> 后添加占位用 <span class=br> 标签;
自动折行间距通过 行高 - 字体大小 进行控制,<br> 换行间距通过 行高 - 字体大小 + .br 元素高度 控制。

代码

text=text.replace(/<br\s?\/?>/ig,'<br><span class=br></span>'); 
.content{ 
    line-height:1.8; 
    .br{ 
        display:block; 
        height:.4em; 
    } 
} 

样例

可以围观这一篇文字比较多的文章