vue renders html incorrectly

Take a simple html code.

<p style="word-break: break-word; white-space:pre-wrap; inline-size: 300px">Lorem     ipsum dolor sit amet, consectetur adipiscing elit. 
  
  
  In congue imperdiet blandit. Proin iaculis tortor quis mauris laoreet, sit amet suscipit velit finibus. Phasellus vitae nunc ex. </p>

example on codepen

Place it in vue template.

<template>
    <p style="word-break: break-word; white-space:pre-wrap; inline-size: 300px">Lorem     ipsum dolor sit amet, consectetur adipiscing elit. 
      
      
      In congue imperdiet blandit. Proin iaculis tortor quis mauris laoreet, sit amet suscipit velit finibus. Phasellus vitae nunc ex. </p>
</template>

example on vue playground

Please tell me why the result is not identical: in the Vue version there are no duplicate spaces and newlines

>Solution :

Vue server side rendering (SSR) ‘vue/server-renderer’ does not keep whitespaces in the template by default. Looking at the above Vue playground, this is how it’s being rendered in your case. (but this can also be done by some additional code minifiers too)

Check the below Codepen, with a simple Vue.js SPA config:

https://codepen.io/zsolt-apponyi/pen/dyJGyjL

But the solution what you’re possibly looking for is as follows:

<template>
<p style="word-break: break-word; white-space:pre-wrap; inline-size: 300px" v-html="`Lorem     ipsum dolor sit amet, consectetur adipiscing elit. 
  
  
  In congue imperdiet blandit. Proin iaculis tortor quis mauris laoreet, sit amet suscipit velit finibus. Phasellus vitae nunc ex. `"></p>
</template>

Just put your text into v-html directive (using backticks), in this case you can be sure that whitespaces will be kept when compiling your template.