Home > Web Front-end > uni-app > body text

How to express spaces in uniapp (two ways)

PHPz
Release: 2023-04-14 11:42:05
Original
6270 people have browsed it

There are two ways to represent spaces in Uniapp, you can use HTML entity representation or text spacing attributes in CSS style sheets.

  1. Use HTML entity representation:

In HTML, the entity representation of spaces is " ". In Uniapp's template syntax, this entity can also be used directly to represent spaces.

For example, to add three spaces to a text block, you can write:

<template>
  <view>这   是三个空格</view>
</template>
Copy after login
  1. Use the text spacing property in the CSS style sheet:

In the CSS style sheet, you can use the words-spacing attribute to set the spacing between text. The value of this attribute is the width of the space, which can be set to a specific pixel value or units such as em.

For example:

<template>
  <view class="text">这是一段文字,<span>这里有个空格</span>,还有一个空格<span> </span>和一个em空格<span>&emsp;</span></view>
</template>

<style>
  .text span {
    font-size: 20px;
    word-spacing: 10px; /* 文字之间增加10px的间距 */
  }
  .text span:last-child {
    word-spacing: 1em; /* 文字之间增加一个em的间距 */
  }
</style>
Copy after login

By using the above two methods, you can easily express spaces in Uniapp projects.

The above is the detailed content of How to express spaces in uniapp (two ways). For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template