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> » </li>
<li style="display: inline-block"><a href="#">B</a></li>
</ol>
https://jsfiddle.net/27vwLn6u/
Here's the same example in Vue 2:
This is now supported since Vue 3.1.0. See https://github.com/vuejs/vue-next/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:
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> » </li>
<li style="display: inline"><a href="#">B</a></li>
</ol>
<ol>
<li style="display: inline-block"><a href="#">A</a> » </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.