Spaces not shown in HTML

Question

I have the following text stored in a MySQL database.

<p style='text-align: left;'><span style='font-size: 10px;'>Test</span><strong style='font-size: 10px;'><span style='color: red;'> red bold </span></strong><span style='font-size: 10px;'>text</span></p>

In a page it is read and displayed as

$htmlText = ... gets the above html from the database

<div id="text1" onclick="modalText(this)" style="border: 1px solid;">
    <?php echo $htmlText;?>
</div>

and I get this:

When I click on the div it opens a modal window where the text can be edited using tinyMCE and here it displays without the spacing issue.

Why do I get the initial spacing problem and how can I work around it?

Does this answer your question? [Text inside div not showing multiple white spaces between words](https://stackoverflow.com/questions/6151554/text-inside-div-not-showing-multiple-white-spaces-between-words) — ℛɑƒæĿᴿᴹᴿ, Jun 29 '20 at 15:10
Yes I could do that but if I am storing a lengthy string it seems that should be a better solution than replacing every space with — RGriffiths, Jun 29 '20 at 15:13

Aryan Beezadhur · Accepted Answer · 2020-06-29T15:35:06.580

0

Add this CSS to the element containing the text:

element {
    white-space: pre-wrap;
}

MDN

Sequences of white space are preserved. Lines are broken at newline characters, at <br>, and as necessary to fill line boxes.

Stack Snippet:

div {
  white-space: pre-wrap;
}

<div>
  foo     bar          baz
</div>

edited Jun 29 '20 at 15:35

answered Jun 29 '20 at 15:21

Aryan Beezadhur

4,503
4
21
42

It helps with the spaces although I need to use pre-wrap for longer text. The problem with this solution is that it makes knocks out the vertical positioning of the text. – RGriffiths Jun 29 '20 at 15:30

Spaces not shown in HTML

1 Answers1