I have a variable text that sometimes contains plain text or sometimes codes and sometimes tables.
I want to minimize the HTML tags in the database, so I didn't use pre
tag in table
and text
and used only in the codes (space preservation is not required in other two cases).
Now I'm stuck in a problem where I have tables
as my data which is passing through nl2br
that causing the following output in my source codes.
<table><br />
<thead><br />
<tr><br />
<th>Operator</th><br />
<th>Left</th><br />
<th>Right</th><br />
<th>Remark</th><br />
</tr><br />
</thead><br />
<tbody><br />
<tr><br />
<td>/</td><br />
<td>10</td><br />
<td>5 or 5 / 2 / 1</td><br />
<td>Left operand is unambiguous, right is not</td><br />
</tr><br />
<tr><br />
<td>/</td><br />
<td>5 or 10 / 5</td><br />
<td>2 or 2 / 1<td><br />
<td>Both left and right are ambiguous</td><br />
</tr><br />
<tr><br />
<td>/</td><br />
<td>2 or 10 / 5 / 2</td><br />
<td>1</td><br />
<td>Right operand is unambiguous and left is not</td><br />
</tr><br />
</tbody><br />
</table><br />
But in chrome developer's tools, it is showing something different than this.
</p><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<table class="rembr">
<thead>
<tr>
<th>Operator</th>
<th>Left</th>
<th>Right</th>
<th>Remark</th>
</tr>
</thead>
<tbody>
<tr>
<td>/</td>
<td>10</td>
<td>5 or 5 / 2 / 1</td>
<td>Left operand is unambiguous, right is not</td>
</tr>
<tr>
<td>/</td>
<td>5 or 10 / 5</td>
<td>2 or 2 / 1</td><td>
</td><td>Both left and right are ambiguous</td>
</tr>
<tr>
<td>/</td>
<td>2 or 10 / 5 / 2</td>
<td>1</td>
<td>Right operand is unambiguous and left is not</td>
</tr>
</tbody>
</table><br>
I did not understand this behavior why different outputs for the same page.
Well, for now, I want to know how can I use table tag in nl2br
without having the br
after every table
tag?
After googling days, I found a perfect solution for this. pre-wrap
.
It will preserve white-spaces and new lines but wrap the word when overflow the text.
So,
div{
white-space: pre-wrap;
}