CODEWITHSUNDEEP
javascripthtmlhandlebars.js
alex
alex

Reputation: 7601

How to remove white space in a multiple line HTML arrangement?

I have a template with a Handlebar-style templating system:

<div class="alert alert-danger" v-if="!panoURL">
  {{ $t('invalidPanorama') }}{{ $t(objectName) | lowercase }}{{ $t('period') }}
</div>

Output message: Please re-upload this panorama.

As you can see the message is localized; it also has a Chinese version. Since in Chinese words don't have spaces I have to place the spaces in the localized string. Not in the template.

To improve redeability I did this:

<div class="alert alert-danger" v-if="!panoURL">
  {{ $t('invalidPanorama') }}
  {{ $t(objectName) | lowercase }}
  {{ $t('period') }}
</div>

But a space is added after each string.

How to do write the structure like the second example but produce the example output?

Upvotes: 0

Views: 66

Answers (1)

Asons
Asons

Reputation: 87262

If I understood your correct, this is a classical white space issue when using inline elements, where the markup's broken lines gives that space, so try this

<div class="alert alert-danger" v-if="!panoURL">
     {{ $t('invalidPanorama') }}<!--
  -->{{ $t(objectName) | lowercase }}<!--
  -->{{ $t('period') }}
</div>

Upvotes: 2

Related Questions