关于样式markdown-text { white-space: pre-wrap; }

[shiedman]

这个commit写着fix: markdown-text use pre-wrap，在我看来却是broke，如果下面理解有错误请指出。
pre-wrap的作用是使html的标签之间的文本中包含的换行符排版显示出来，例如
<div>
第一行
</div>
<div>
第二行
</div>
正常来说会排版为2行，但在pre-wrap作用下，会排版为3行，换行符的效果也在html上显示出来了。若无markdown转换，这很好；但经markdown转换后，用户的发帖内容是规范的html格式，排版的换行是通过html标签控制的，这时换行符再显示出来就画蛇添足了，段与段之间在排版上多出一个空行。看看社区现在的帖子，段与段之间全都莫名有一大段空白。

[tiye]

我的 commit...

段与段之间的空白是因为我在 CNode 用两个空格换行时发现的, <p> 的外边距过小, 于是加上.

pre-wrap 是为了应对那些发代码不用 Markdown 标记的内容添加的, 作用基本起到了
但结果是代码当中有空行和 4 空格缩进时页面样式被破坏
目前正在捉急, 发现自己没有金刚钻... markedjs/marked#167

间隔过大是 pre-wrap 增加了一个换行的高度造成的, 我能想到的方案是去掉外边距
那么 <p> 段落之间会有正好一行的空隙, 我觉得应该有一行的对齐

经历的项目少, 没有相关的经验, 抱歉解决一个问题引入两个子问题了

[shiedman]

ok。明白加入pre-wrap的初衷了。

那么能否将pre-wrap的样式只限定于.markdown-text p。
markdown转换后的html一定是<p> ....</p> <p> ...</p>，用户撰写的文本必定在<p>与</p>之间，pre-wrap作用与p标签足够满足chjj/marked#167预期效果，没必要将</p>与<p>这类标签结尾与标签开始之间的换行或者空格也显示出来。
发短帖这点瑕疵无所谓，但长帖段落很多，多出来的换行破坏整体的排版效果，对读者来说绝不是什么好的阅读体验。

ps: 代码块不仅可用缩进标识，用同样可以。在代码块前后加上对用户来说轻而易举。

[tiye]

<p> 也就是行距和段落间距的问题. 我倾向是段落间空一个正常行的高度.. 以便保持整齐
如果不是一个空行, 是要用楼上说法的方案没错了.

Markdown 转化到 <p> 的规则我不大清楚.. 似乎和我手写的不大一样 http://codepen.io/jiyinyiyong/pen/inCxp
我用本地代码测试, 似乎多个空行会被 Markdown 处理只有一个空行..
原来我想, 或许多个空行也许两种方案有差别的, 这样就应该没有了

代码块可以用三个反引号我知道, 所以打算屏蔽缩进, 只用不会被解释出错的方案来标记代码

[shiedman]

也就是行距和段落间距的问题. 我倾向是段落间空一个正常行的高度.. 以便保持整齐

没表达清楚，举个例子来说吧

<p>段落1</p>\n
\n
\n
<p>段落2</p>

在pre-wrap作用下段落1和段落2之间除p的固有间距之外，还多出3个行高。能干掉这3行高，让段落間恢复到一个正常的行高吗。请对比下Node.js 异步异常的处理与domain模块解析这篇文章，禁止markdown-text{white-space: pre-wrap;}属性前后的排版效果。

昨天打算发篇长帖来着，正式发布后一看效果，排版丑爆了。线下各种细调无解，给pre-wrap这个css属性跪了。

[tiye]

@shiedman 的确很丑.. 看来对社区影响很严重啊
我想说明, 你给的例子虽然有 3 个 \n, 其实在 Markdown 处理之后一般只有一个的 \n.
原先我觉得要留手动控制间距余地, 结果发现 Markdown 直接给屏蔽了.

一个行高 28px, 文字高度 CSS 里是 14px, 所以两个段落中间间距有 14+28 px
加上 <p> 的 margin-bottom: 10px, 整个间距 52px 的确很失常..
不过说实话去掉 pre-wrap 以后文本全挤在一起了, 我觉得还是有问题

另外楼上给的链接里, <ul> <li> 受到了 pre-wrap 的影响间距过大, 我没有考虑到...
要解决这个只能按楼上说的 .markdown-text > p { white-space: pre-wrap; } 来修补了
// 要确认一下, 感觉有点怪的 <li>

[shiedman]

<ul> <li>之间的换行符一般有2、3个，所以受pre-wrap的影响更大。以Node.js 异步异常的处理与domain模块解析 中的一段为例，经markdown转换后生成的html为：

<ul>
<li><p>什么时候触发domain的<code>error</code>事件：  </p>\n
<ul>\n
<li>进程抛出了异常，没有被任何的....</li>

</p>与下一个<li>之间有2个换行符\n，pre-wrap作用下就多出2个行距。html嵌套越多，\n换行符就越多，间距就越大。

至此，问题应该描述清楚了。

[tiye]

Close 了?
<p> 标签这段太复杂, 你的代码我是否应该将换行去掉理解呢?

<ul><li><p>什么时候触发domain的<code>error</code>事件：  </p>\n<ul>\n<li>进程抛出了异常，没有被任何的...</li>

注意到的一个问题是, <li> 标签在书写时, 根据中间有空行, 可能是 <li></li>, 可能是 <li><p></p></p>,
导致界面的不整齐.
pre-wrap 现在计划改为 .markdown-text p {}, 先把这个影响因素消除