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

CodePudding user response：

[Fixed] - Credit goes to Michal Levý

Vue server side rendering (SSR) 'vue/server-renderer' Vue-template-compiler 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.

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.