How currectly show space in vue pages

Hello!

In my Laravel 5/vuejs 2 / bootstrap 4 /flexbox app I made a small piece of code:

		<div class="app_header_left_col">
			<div class="app_header_top_col">

				<table>
					<tr>
						<td style="text-align: left;">
							<template v-if="hostels_count">
								<strong>{{ hostels_count }}</strong> hostel{{ pluralize(hostels_count,'','s') }}
							</template>
							<template v-if="!hostels_count">
								Has no hostels yet
							</template>
						</td>
					</tr>
					<tr>
						<td style="text-align: left;">
							<template v-if="featured_hostels_count">
								<strong>{{ featured_hostels_count }}</strong> featured
							</template>
							<template v-if="!featured_hostels_count">
								Has no featured yet
							</template>
						</td>
					</tr>
				</table>

			</div>
			<div class="app_header_bottom_col">
				<template v-if="active_customers_count">
					<strong>{{ active_customers_count }}</strong> customer{{ pluralize(active_customers_count,'','s') }}
				</template>
				<template v-if="!active_customers_count">
					Has no customers yet
				</template>
			</div>
		</div>

which looks good, except before customer label there is no space

image

  1. I did not understand what is the difference that in first 2 cases there is a space, bit not is third?
  2. Which is valid way of in vue pages splitter symbols, like “ ”, “ | ”, “, ” ?

I tried to write   in vue templates, but my PHPStorm after reopening this page renders it as a space…

Thanks!

I’m not sure why it’s not giving you a space on the third line. Your HTML has the same format as the first two.

The only difference I see in the rendered HTML is that the first two lines are double digit numbers. The last line is a single digit, not sure if that has anything to do with it.

You could try hard coding your non-breaking space in there with &nbsp;

<strong>{{ active_customers_count }}</strong>&nbsp;customer{{ pluralize(active_customers_count,'','s') }}

EDIT:
After looking at the HTML again I see that the first two lines are also in a <table>
The cell spacing may be what is giving the space on those.

Last line is just in a <div>

4 Likes