用预包装对齐内容

Question

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

我需要pre-wrap来防止浏览器崩溃空格，但它打破了text-align: justify;属性。例如，请参阅http://jsfiddle.net/xpp48knq/。

我会好的任何解决方案，不会崩溃的空间，并证明内容。

Answer 1

下面是一些解决方法，以解决您的问题。 U应从元素中删除'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;