如何制作空白：预包装； 证明文本？

Question

I have text within pre tags styled like this:

 <pre style="white-space: pre-wrap; font-family: Georgia, 'Times New Roman', Times, serif;">
        ${htmlText} 
 </pre>  

Justify text won't work within white-space: pre-wrap; . But if the text is not white-space: pre-wrap; , then the text white space is deleted. I need the text white space to remain and still be able to justify text.

I've also tried white-space: pre; with overflow-wrap: break-word . This works, but it splits the words when wrapping text. I need justify to work without splitting/breaking words.

How do you make text-align: justify; work with white-space: pre-wrap; ? Or how do you make white-space: pre; while wrapping text in a way that doesn't break words up?

Answer 1

white-space: pre-wrap; has no affect on text-align: justify; here is an example

 .a { white-space: pre-wrap; text-align: justify; }

 <pre class="a"> <p>This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.</p> <p>This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph</p> <p>This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph</p> </pre>

Answer 2

It looks like there's no fix for this. The closest thing I could do is set white-space: normal and give every p tag the css property text-indent: 30px; .

This will justify text and will add an indent to the beginning of every paragraph. But it will also delete all whitespace more than one whitespace. This works for me for now because I was most interested in adding extra whitespace to the beginning of paragraphs.

Answer 3

也许这行得通： display: inline-block;

Answer 4

Did you try this:

.a {
white-space: pre-line;
text-align: left;

}

In my case, this did the work. I could manage multiline text and text is justified left