显示代码块，使用white-space: nowrap强制代码不换行时，却发现空格被合并了，请问怎样在代码不换行的前提下保留原有的空格？
0
悬赏园豆：20
[已解决问题]
解决于 2017-10-25 11:32
在显示代码块的时候，发现有些地方会自动换行，导致代码块的可读性很差，
在使用white-space: nowrap强制文本不换行后，发现之前自动换行的问题解决了，但同时空格也合并了。
因为是代码块，可能有很多行，而每行的前面都需要用空格表示代码的层次关系，所以不希望空格被合并。
所以问题是：强制文本不换行的前提下保留原有的空格不合并
最佳答案
0
white-space: pre;
收获园豆：20
谢谢你的回复，但white-space: pre在safari下经过测试，会有可能出现换行的情况，所以才用了white-space: nowrap
@颜家大少: word-wrap: normal; word-break: normal; 把这两个属性重置一下
@by.Genesis:
我现在的问题是这样的，因为微信公众号没有代码块的功能，所以我想把渲染后的代码块拷贝到微信公众号中实现自己想要的代码块的显示。
而在用Android手机看公众号文章，或非Safari的在公众号页面“预览”时，代码块的显示都是没有问题的;
但在iphone手机看公众号文章，或Safari在公众号页面“预览”时，会有极少的几行代码会出现我不想要的换行，而导致可读性很差。
就可能是微信公众号的一个bug,而我只能想办法避开它，它的出现有可能是很几个条件的组合，而不是纯粹的某一个条件。
就目前的测试来看，我发现只有用： white-space: nowrap;才能解决此问题，但会出现空格行合并的问题，所以我现在只想解决空格行合并的问题。谢谢！
另外，附上我的css的相关代码，如下：
code {
display: block;
word-wrap: normal !important;
word-break: normal !important;
white-space: nowrap;
//white-space: pre;
line-height: 12px;
font-size: 10px;
font-family: inherit !important;
overflow: scroll;
overflow-scrolling: touch;
}
@by.Genesis:
现在用的是类似：
<pre><code>
<span class=highlight_1>my</span>
<span class=highlight_2>test</span>
</code></pre>
这样的做法，把类似：my test这样的代码块按代码所属的类型分别highlight,
有想过把空格替换为： ，但尝试了在<pre><code>里面， 是显示为： ，而不是空格的，不清楚是不是还要做其它的特殊处理。
