Question 270898 in Html Question posted in
Some basic documentation can be found here.

Html – VSCode – indenting adds spaces around strings

I am using Vue 3 & Prettier w/ VS Code. Whenever I have a string on it’s own line, it gets formatted how I want it. The problem… My Dev Tool browser renders strings with spaces around them. I need strings to render without spaces so my tests can pass. The code below:

<div>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo voluptatibus quae, eveniet quia
  pariatur cupiditate exercitationem aut incidunt natus, possimus delectus commodi! Deleniti,
  dignissimos aliquam numquam voluptatibus qui dolores neque!
</div>

Looks like this in my Dev Tools.

enter image description here

Another example:

<div>
    testing
</div>

Render likes:
enter image description here

Tags:

2

Answers


  1. 0

    In your Vue component, you can do the following:

    <template>
  <div class="preserve-whitespace">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo voluptatibus quae, eveniet quia
pariatur cupiditate exercitationem aut incidunt natus, possimus delectus commodi! Deleniti,
    dignissimos aliquam numquam voluptatibus qui dolores neque!
  </div>
</template>

<style scoped>
.preserve-whitespace {
  white-space: pre-wrap;
}
</style>
    Login or Signup to reply.
  2. 0 
    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo voluptatibus quae, eveniet quia
  pariatur cupiditate exercitationem aut incidunt natus, possimus delectus commodi! Deleniti,
  dignissimos aliquam numquam voluptatibus qui dolores neque!</div>

    or

    <div><!--
  -->Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo voluptatibus quae, eveniet quia
  pariatur cupiditate exercitationem aut incidunt natus, possimus delectus commodi! Deleniti,
  dignissimos aliquam numquam voluptatibus qui dolores neque!<!--
--></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search