Solve the problem that the text inserted using v-html in vue does not wrap

Sometimes the interface returns a very long string, and there are line breaks in it that need to be displayed directly on the page.

<p>{
    
    {
    
    text}}</p>
//或
<p v-html="text"></p>

Neither of the above two methods can make the text wrap, because v-html does not recognize line breaks, but it can recognize tags.

Solution:

1. Add style

Add styles when using v-html, white-soace:pre-wrap, to let the browser keep blanks and line breaks.

<p v-html="text" style="white-soace:pre-wrap"></p>

2. Wrap with pre label

The text enclosed in pre tags usually retains spaces and newlines.

<pre><p v-html="text"></p></pre>

3. Regular replacement

The expression \ n with n to replace
this can be identified v-html

<p v-html="text.replace(/\n/g,'<br/>')"></p>