用预包装证明内容合理

Question

在Firefox上，如何证明具有white-space: pre-wrap;CSS属性的文本是合理的？

我需要pre-wrap防止浏览器折叠空格，但这会破坏text-align: justify;属性。例如，请参见http://jsfiddle.net/xpp48knq/。

任何不会折叠空格且证明内容合理的解决方案都可以。

Answer 1

这是您问题的一些解决方法。

你应该从元素中删除“white-space: pre-wrap”，并将文本中的所有空格替换为“​”（意思是零宽度空格加空格）。并且在每个主流浏览器中一切都会正常工作。

这是一些示例： https: //jsfiddle.net/gvm3x354/

<div id='output' class='text'>
</div>

.text {
  border: 1px solid black;
  text-align: justify;
  width: 200px;
  height: auto;
}


var output = document.getElementById('output'),
  text = 'I\'m a justified  text with multiple    spaces between   words. Really cool,  so js. Found better workaround? E-mail me!';

text = text.replace(/\s/g, '&#8203; ');
output.innerHTML = text;