Justify content with pre-wrap

Question

On Firefox, how can you justify text that has the white-space: pre-wrap; CSS attribute?

I need the pre-wrap to prevent the browser from collapsing whitespaces, but it breaks the text-align: justify; property. See http://jsfiddle.net/xpp48knq/ for example.

I would be ok with any solution that doesn't collapse spaces and that justifies content.

Vorlage

It's not intended to work at the moment: w3.org/TR/CSS21/text.html#alignment-prop – Tutorial

That's sad. Do you have any idea of a workaround? – Vorlage

This seems to have what you're looking for: https://mcmap.net/q/1918061/-how-to-preserve-line-breaks-but-have-text-align-justify. – Ragan

Answer 1

Here's some workaround for ur problem.

U should remove 'white-space: pre-wrap' from the element, and replace all spaces in text to '​ '(mean zero-width space plus space). And everything will be working fine in every major browser.

Here's some example: 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;

Prunelle