使用预包装来证明内容

Question

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

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

我会对任何不会折叠空间并证明内容合理的解决方案感到满意。

Answer 1

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

你应该删除＆＃39; white-space：pre-wrap＆＃39;从元素中，将文本中的所有空格替换为＆＃39;＆＃39;（表示零宽度空间加空格）。一切都将在每个主流浏览器中正常运行。

以下是一些例子： 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;