Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Use a <a href="http://www.fileformat.info/info/unicode/char/200b/index.htm" rel="nofollow noreferrer">zero-width space</a> (<code>&amp;#8203;</code>) to preserve whitespace and allow the text to wrap. The basic idea is to pair each space or sequence of spaces with a zero-width space. Then replace each space with a non-breaking space. You'll also want to encode html and add line breaks.</p> <p>If you don't care about unicode characters, it's trivial. You can just use <code>string.replace()</code>:</p> <pre><code>function textToHTML(text) { return ((text || "") + "") // make sure it is a string; .replace(/&amp;/g, "&amp;amp;") .replace(/&lt;/g, "&amp;lt;") .replace(/&gt;/g, "&amp;gt;") .replace(/\t/g, " ") .replace(/ /g, "&amp;#8203;&amp;nbsp;&amp;#8203;") .replace(/\r\n|\r|\n/g, "&lt;br /&gt;"); } </code></pre> <p>If it's ok for the white space to wrap, pair each space with a zero-width space as above. Otherwise, to keep white space together, pair each <em>sequence</em> of spaces with a zero-width space:</p> <pre><code> .replace(/ /g, "&amp;nbsp;") .replace(/((&amp;nbsp;)+)/g, "&amp;#8203;$1&amp;#8203;") </code></pre> <p>To encode unicode characters, it's a little more complex. You need to iterate the string:</p> <pre><code>var charEncodings = { "\t": "&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;", " ": "&amp;nbsp;", "&amp;": "&amp;amp;", "&lt;": "&amp;lt;", "&gt;": "&amp;gt;", "\n": "&lt;br /&gt;", "\r": "&lt;br /&gt;" }; var space = /[\t ]/; var noWidthSpace = "&amp;#8203;"; function textToHTML(text) { text = (text || "") + ""; // make sure it is a string; text = text.replace(/\r\n/g, "\n"); // avoid adding two &lt;br /&gt; tags var html = ""; var lastChar = ""; for (var i in text) { var char = text[i]; var charCode = text.charCodeAt(i); if (space.test(char) &amp;&amp; !space.test(lastChar) &amp;&amp; space.test(text[i + 1] || "")) { html += noWidthSpace; } html += char in charEncodings ? charEncodings[char] : charCode &gt; 127 ? "&amp;#" + charCode + ";" : char; lastChar = char; } return html; } </code></pre> <p>Now, just a comment. Without using monospace fonts, you'll lose some formatting. Consider how these lines of text with a monospace font form columns:</p> <pre><code>ten seven spaces eleven four spaces </code></pre> <p>Without the monospaced font, you will lose the columns:</p> <p>&nbsp;ten&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;seven spaces<br> &nbsp;eleven&nbsp;&nbsp;&nbsp;&nbsp;four spaces</p> <p>It seems that the algorithm to fix that would be very complex.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload