Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Non breaking spaces are rendered as regular space in vue template

When I used   in Vue template, in browser they are rendered as regular space.

<template>
  <p>
     sample text in&nbsp;sample text 
     <strong>lorem ipsum</strong>
   </p>
</template>

Final render in browser looks like:

sample text in sample text lorem ipsum

My question is how to write non breaking spaces in template?

like image 948
petkopalko Avatar asked Jun 03 '20 08:06

petkopalko


People also ask

What is non-breaking space character?

In word processing and digital typesetting, a non-breaking space, , also called NBSP, required space, hard space, or fixed space (though it is not of fixed width), is a space character that prevents an automatic line break at its position.

What does template tag do in Vue?

Vue uses an HTML-based template syntax that allows you to declaratively bind the rendered DOM to the underlying component instance's data.

What does $t mean in Vue?

Vuex is a state management pattern for vue. js. $t is the injected method from vue. js or Vue. i18n.

How does Vue reactivity work?

Vue's reactivity system works by deeply converting plain JavaScript objects into reactive proxies. The deep conversion can be unnecessary or sometimes unwanted when integrating with external state management systems (e.g. if an external solution also uses Proxies).


1 Answers

<p>
 sample text in{{'\xa0'}}sample text 
 <strong>lorem ipsum</strong>
<p>

Try to use the JavaScript escape code and not the HTML entity.

like image 60
Daniel Fu Avatar answered Nov 14 '22 21:11

Daniel Fu