Как вставить пробелы / табуляции в текст, используя HTML / CSS?

28.12.2019CSS, HTML, Веб-технологии, Веб-технологии Вопросы

Интервал может быть добавлен с использованием HTML и CSS тремя способами:

Способ 1: использование специальных символов, предназначенных для разных пробелов

& Nbsp; символьная сущность, используемая для обозначения неразрывного пробела, который является фиксированным пробелом. Это может быть воспринято как двойное пространство нормального пространства. Он используется для создания пробела в строке, который не может быть разбит переносом слов.

& Ensp; символьная сущность, используемая для обозначения пробела 'en', что означает размер половины шрифта текущего шрифта. Это может быть воспринято как двойное пространство нормального пространства.

& Emsp; символьная сущность, используемая для обозначения пробела 'em', что означает равный размеру точки текущего шрифта. Это может быть воспринято как четырехкратное пространство нормального пространства.

Синтаксис:

Regular space: &nbsp;
Two spaces gap: &ensp;
Four spaces gap: &emsp;

Пример:

<!DOCTYPE html>

<html>

<head>

<title>

How to insert spaces/tabs in text using HTML/CSS?

</title>

</head>

<body>

<h1 style="color: green">GeeksforGeeks</h1>

<b>How to insert spaces/tabs in text using HTML/CSS?</b>

<p>This is a regular space.</p>

<p>This is a two spaces gap.</p>

<p>This is a four spaces gap.</p>

</body>

</html>

Выход:

Способ 2. Использование свойства размера табуляции для задания расстояния между символами табуляции

Свойство CSS размера табуляции устанавливает количество пробелов, которое будет отображать каждый символ табуляции. Изменение этого значения позволяет вставить необходимое количество места на одном символе табуляции. Однако этот метод работает только с предварительно отформатированным текстом (с использованием тегов <pre>).

Символ табуляции можно вставить, удерживая Alt и нажимая 0 и 9 вместе.

Синтаксис:

.tab {
        tab-size: 2;
    }

Пример:

<!DOCTYPE html>

<html>

<head>

<title>

How to insert spaces/tabs in text using HTML/CSS?

</title>

<style>

.tab1 {

tab-size: 2;

}

.tab2 {

tab-size: 4;

}

.tab4 {

tab-size: 8;

}

</style>

</head>

<body>

<h1 style="color: green">GeeksforGeeks</h1>

<b>How to insert spaces/tabs in text using HTML/CSS?</b>

<pre class="tab1">This is a tab with 2 spaces.</pre>

<pre class="tab2">This is a tab with 4 spaces.</pre>

<pre class="tab4">This is a tab with 8 spaces.</pre>

</body>

</html>

Выход:

Метод 3: Создание нового класса для интервалов с помощью CSS

Новый класс может быть создан с определенным интервалом, используя свойство margin-left. Количество места может быть задано числом пикселей, указанным в этом свойстве.

Свойство display также имеет значение inline-block, чтобы после элемента не добавлялся разрыв строки. Это позволяет пространству сидеть рядом с текстом и другими элементами.

Синтаксис:

.tab {
    display: inline-block;
    margin-left: 40px;
}

Пример:

<!DOCTYPE html>

<html>

<head>

<title>

How to insert spaces/tabs in text using HTML/CSS?

</title>

<style>

.tab {

display: inline-block;

margin-left: 40px;

}

</style>

</head>

<body>

<h1 style="color: green">GeeksforGeeks</h1>

<b>How to insert spaces/tabs in text using HTML/CSS?</b>

<p>This is a<span class="tab"></span>tab space in the document.</p>

</body>