CODEWITHSUNDEEP
vuejs3
nfplee
nfplee

Reputation: 7977

Vue 3 removes white-space between inline-block elements

Vue 3 removes the white-space between inline-block elements. This means I'll have to go back through quite a few of my sites and update the CSS before I can safely upgrade from version 2. Is there a way to turn this off?

See the following for an example:

<ol>
    <li style="display: inline-block"><a href="#">A</a> &raquo; </li>
    <li style="display: inline-block"><a href="#">B</a></li>
</ol>

https://jsfiddle.net/27vwLn6u/

Here's the same example in Vue 2:

https://jsfiddle.net/3d0jcnmf/

Upvotes: 7

Views: 2587

Answers (2)

nfplee
nfplee

Reputation: 7977

This is now supported since Vue 3.1.0. See https://github.com/vuejs/core/pull/1600 for more information.

Basically now you need to add the following when creating the app:

app.config.compilerOptions.whitespace = 'preserve';

Here's the updated example:

https://jsfiddle.net/bscz2306/

Upvotes: 9

Daniel
Daniel

Reputation: 35684

Looks like you already found the answer at https://github.com/vuejs/vue-next/issues/2431#issuecomment-712451346

V3 automatically condenses the white space.

You can get around it by using a single line.

<div id="app">
  <ol>
      <li style="display: inline"><a href="#">A</a> &raquo; </li>
      <li style="display: inline"><a href="#">B</a></li>
  </ol>
  <ol>
      <li style="display: inline-block"><a href="#">A</a> &raquo; </li> <li style="display: inline-block"><a href="#">B</a></li>
  </ol>
  {{foo}}
</div>

I was looking into the code, and looks like pre tags are handled differently, but I haven't found a way to pass isPreTag to the component.

Upvotes: 1

Related Questions