Html for word spacing - Word и Excel - помощь в работе с программами

Example

Specify that the space between words in elements should be 30 pixels:

p
{
word-spacing: 30px;
}

Try it Yourself »

Definition and Usage

The word-spacing property increases or decreases the white space between words.

Note: Negative values are allowed.

Show demo ❯

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
word-spacing	1.0	6.0	1.0	1.0	3.5

CSS Syntax

word-spacing: normal|length|initial|inherit;

Property Values

Value	Description	Demo
normal	Defines normal space between words (0.25em) . This is default	Demo ❯
length	Defines an additional space between words (in px, pt, cm, em, etc). Negative values are allowed. Read about length units	Demo ❯
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

CSS tutorial: CSS Text Spacing

HTML DOM reference:
wordSpacing property

Источник

Свойство word-spacing устанавливает интервал между словами.

Если для текста задано выравнивание через text-align со значением justify (выравнивание по ширине), то интервал между словами будет установлен принудительно, но не меньше значения, указанного через word-spacing.

Демо¶

Текст

hanging-punctuation
hyphens
letter-spacing
line-break
overflow-wrap
paint-order
tab-size
text-align
text-align-last
text-indent
text-justify
text-size-adjust
text-transform
white-space
word-break
word-spacing

letter-spacing
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-decoration-thickness
text-decoration-skip
text-decoration-skip-ink
text-emphasis
text-emphasis-color
text-emphasis-position
text-emphasis-style
text-indent
text-rendering
text-shadow
text-underline-position
text-transform
white-space
word-spacing

Синтаксис¶

/* Keyword value */
word-spacing: normal;

/* <length> values */
word-spacing: 3px;
word-spacing: 0.3em;

/* <percentage> values */
word-spacing: 50%;
word-spacing: 200%;

/* Global values */
word-spacing: inherit;
word-spacing: initial;
word-spacing: unset;

Значения¶

В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. Значение может быть и отрицательным, но следует проверять работоспособность в разных браузерах. Процентная запись не применима.

normal: Устанавливает интервал между словами как обычно.

Значение по-умолчанию: normal

Применяется ко всем элементам

Спецификации¶

CSS Text Level 3
CSS Level 2 (Revision 1)
CSS Level 1

Описание и примеры¶

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>word-spacing</title>
    <style>
      .tel {
        word-spacing: 10px;
        font-size: 2em;
      }
    </style>
  </head>
  <body>
    <p class="tel">Тел.: 555-221-061</p>
  </body>
</html>

Источник

Устанавливает интервал между словами. Если для текста задано выравнивание через text-align со значением justify (выравнивание по ширине), то интервал между словами будет установлен принудительно, но не меньше значения, указанного через word-spacing.

Краткая информация

Значение по умолчанию	normal
Наследуется	Да
Применяется	Ко всем элементам
Анимируется	Да

Синтаксис

word-spacing: <размер> | normal

Синтаксис

	Описание	Пример
<тип>	Указывает тип значения.	<размер>
A && B	Значения должны выводиться в указанном порядке.	<размер> && <цвет>
A \| B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal \| small-caps
A \|\| B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width \|\| count
[ ]	Группирует значения.	[ crop \|\| cross ]
*	Повторять ноль или больше раз.	[,<время>]*
+	Повторять один или больше раз.	<число>+
?	Указанный тип, слово или группа не является обязательным.	inset?
{A, B}	Повторять не менее A, но не более B раз.	<радиус>{1,4}
#	Повторять один или больше раз через запятую.	<время>#

Значения

В качестве значений принимаются любые единицы длины, принятые в CSS — например, пиксели (px), дюймы (in), пункты (pt) и др. Допустимо использовать отрицательное значение, но читаемость текста может при этом снизиться. Процентная запись запрещена.

normal: Устанавливает интервал между словами как обычно.

Песочница

Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.

div {
  word-spacing: {{ playgroundValue }}px;
}

Пример

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>word-spacing</title>
<style>
.tel {
word-spacing: 10px;
font-size: 2em;
}
</style>
</head>
<body>
Тел.: 555-221-061
</body>
</html>

В данном примере задаётся фиксированное расстояние между номером телефона и текстом (рис. 1).

Рис. 1. Применение свойства word-spacing

Объектная модель

Объект.style.wordSpacing

Спецификация

Спецификация	Статус
CSS Text Level 3	Рабочий проект
CSS Transitions	Рабочий проект
CSS Level 2 (Revision 1)	Рекомендация
CSS Level 1	Рекомендация

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры


6	12	1	3.5	1	1

Браузеры

В таблице браузеров применяются следующие обозначения.

— элемент полностью поддерживается браузером;
— элемент браузером не воспринимается и игнорируется;
— при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

Источник

There are several ways.

Pre Tag

One is to use the <pre> tag, which will render content with the whitespace intact.

Space Entities

Another is to add space entities, like   (non-breaking space). Keep in mind with this approach, there are several space entities, and this particular entity does not word-wrap, which may not be the behavior you wanted. renders a normal space, which the browser should not collapse, and which will word-break as expected.

Here is a list of different Unicode spaces you can use.

CSS

Also, you usually should not use HTML entities to create space between text which is not part of one uniform sentence. This is because in this case, the better solution is to use margin or padding to separate the two, and keep each in its own element.

As another answer mentions, CSS letter-spacing is also an option if the spacing is consistent but larger than normal.

Here’s an example of all these approaches (the CSS is not important here):

th, td {
  border: 1px solid black;
  padding: 3px;
}

th {
  background-color: darkgrey;
  color: white;
}

table {
  border-collapse: collapse;
}

body {
  font-family: sans-serif;
}

<table>
  <thead>
    <tr>
      <th colspan="2">HTML Spacing</th>
    </tr>
    <tr>
      <th>Method</th>
      <th>Result</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Normal</td><td><p>a b       c</p></td>
    </tr>
    <tr>
      <td>Pre Tag</td><td><pre>a b       c</pre></td>
    </tr>
    <tr>
      <td>Margin Left</td><td><span>a </span><span>b</span><span style="margin-left: 3.5em;">c</span></td>
    </tr>
    <tr>
      <td>Non-breaking Space</td><td><p>a b&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;c</p></td>
    </tr>
    <tr>
      <td>Em Space</td><td><p>a b       c</p></td>
    </tr>
    <tr>
      <td>Letter-Spacing</td><td><span>a </span><span style="letter-spacing: 3.5em;">bc</span></td>
    </tr>
  </tbody>
</table>

Источник

Download Article

Adding extra space between words and paragraphs in HTML is very different than in apps like Microsoft Word. But don’t tear out your hair just yet—we’ll show you the easiest ways to control spacing between words and lines of text, as well as how to add extra space to the beginning of each paragraph so they are properly indented on the page. This wikiHow article teaches you different ways you can add spaces to your HTML code.

1

Open your HTML code in a text editor. You can use any text editor, such as Notepad for Windows, or TextEdit for macOS, to edit your code. If you press the spacebar multiple times to add extra space between words or characters, you won’t see those extra spaces on your webpage—HTML automatically converts multiple spaces into a single space. You can fix this by using non-breaking space characters instead of pressing the spacebar.
2
Type   where you want to insert an extra space. Add one non-breaking space character for every space you want to add. Unlike pressing the spacebar multiple times in your HTML code, typing   more than once creates as many spaces as there are instances of  .^[1]
- For example, let’s say you want three spaces between the words «What will you learn» and «today?» Instead of pressing the spacebar three times, just type     between the two segments. Here’s an example:
```
<!DOCTYPE html>
<html>
<head>
<title>wikiHow: How-to instructions you can trust.</title>
</head>
<body>
What will you learn&amp;nbsp;&amp;nbsp;&amp;nbsp;today?
</body>
</html>
```
Advertisement
3
Use other spacing characters as shortcuts. If you want to insert two spaces, four spaces, or indent the beginning of a line, you don’t have to type   multiple times:
- Two spaces: Type &ensp;
- Four spaces: Type &emsp;

1

Open your HTML code. Another way to add more spaces to your code is to use the HTML <pre> tag. This tag essentially displays the text exactly as you type or paste it, spaces and all. Start by opening your code in a text editor like Notepad for Windows or TextEdit for macOS.
2
Type <pre> </pre> tags in the body of your document. Any text you want to keep preformatted with a particular amount of spaces and/or line breaks will go between these tags:
```
<!DOCTYPE html>
<html>
<head>
<title>wikiHow: How-to instructions you can trust.</title>
</head>
<body>
<pre> </pre>
</body>
</html>
```
3
Type or paste text exactly as intended between the «<pre>» and »<pre>» tags. In this example, we’re creating three spaces between words, as well as a line break. When pre-formatting text, any spaces between words, as well as line breaks you create by pressing «Enter» or «Return,» will be displayed on the webpage.^[2]
```
<!DOCTYPE html>
<html>
<head>
<title>wikiHow: How-to instructions you can trust.</title>
</head>
<body>
<pre>What will you 
learn today?</pre>
</body>
</html>
```

1

Open your HTML code in a text editor. Do you want to add extra space between paragraphs or other elements on the page? Pressing Enter or Return a bunch of times in your code won’t do the trick, but adding a line break tag   will! Start by opening the HTML code of the page you want to edit.
2
Type   on each line you want to make blank. For example, if you want to insert just one extra blank horizontal line between two paragraphs, you’d just type one   once. But if you wanted to add three line breaks, you could type it three times:  .
- In this example, we’re adding two lines of extra space between our sentences:
```
<!DOCTYPE html>
<html>
<head>
<title>wikiHow: How-to instructions you can trust.</title>
</head>
<body>
<pre>What will you 
learn today?</pre>
 
You will learn a lot!

</body>
</html>
```

1

Open an HTML document. Let’s say you want to indent the beginning a paragraph with some space—let’s say 10 pixels. The best way to do this would be to use CSS (Cascading Style Sheets). We’ll cover two ways to do this—one lets you indent each paragraph manually, and another indents all paragraphs at once. Start by opening up your HTML document in a text editor.
2
Indent a single paragraph. If we want to indent the paragraph in our example, we can do so by adding the text-indent property to its tag. In this example, we’ll be indenting our paragraph by 10px:
```
<!DOCTYPE html>
<html>
<head>
<title>wikiHow: How-to instructions you can trust.</title>
</head>
<body>
Welcome to wikiHow, the most trusted how-to site on the internet. wikiHow is where trusted research and expert knowledge come together.
 Since 2005, wikiHow has helped billions of people learn how to solve problems large and small. We work with credentialed experts, a team of trained researchers, and a devoted community to create the most reliable, comprehensive and delightful how-to content on the Internet.
</body>
</html>
```
- Since we added the text-indent property to just the first paragraph, that is the only paragraph that will be indented. Read on to learn how to indent all paragraphs on the page the same way instead of just one!
3
Create a style section for your CSS. If we want to indent all paragraphs on our page, we can do so by defining the paragraph style in CSS. The style section goes into the head of your HTML code, or on a separate style sheet. Let’s add ours to the head, which is between the <head> and </head> tags:
```
<!DOCTYPE html>
<html>
<head>
<title>wikiHow: How-to instructions you can trust.</title>
<style>
</style>
</head>
<body>
Welcome to wikiHow, the most trusted how-to site on the internet. wikiHow is where trusted research and expert knowledge come together.
Since 2005, wikiHow has helped billions of people learn how to solve problems large and small. We work with credentialed experts, a team of trained researchers, and a devoted community to create the most reliable, comprehensive and delightful how-to content on the Internet.
</body>
</html>
```
4
Type the indenting code into the style area. So, we want every paragraph to begin with 10px of space, not just one. This means we’ll need to create a style for the paragraph tag () that automatically adds 10px of space to the beginning of the first word in each paragraph. We’ll also want to remove the text-indent property from our original example, as it won’t be needed anymore. The property should look like this:
```
<!DOCTYPE html>
<html>
<head>
<title>wikiHow: How-to instructions you can trust.</title>
<style>
p { 
	text:indent: 10px;
</style>
</head>
<body>
Welcome to wikiHow, the most trusted how-to site on the internet. wikiHow is where trusted research and expert knowledge come together.
Since 2005, wikiHow has helped billions of people learn how to solve problems large and small. We work with credentialed experts, a team of trained researchers, and a devoted community to create the most reliable, comprehensive and delightful how-to content on the Internet.
</body>
</html>
```
- You can adjust the number of spaces by typing a different number after «text-indent:».
- You can use unites other than pixels to define the size of your indent, such as percentage (i.e. «text-indent: 15%;») or measurements (e.g., «text-indent: 3mm;»).
5
Type  at the beginning of each paragraph. Since we’ve added specific instructions to indent the tag, every paragraph on the page will be indented 2.5em. This goes for our existing paragraphs, and any new paragraphs we add to the page.

Sample HTML Code

Add New Question

Question

If I define lines of text as individual paragraphs, I get a blank space between lines. How do I get rid of that space?

Use a line break instead of the paragraph break.
Question

Can I specify more than one CSS class for any HTML element?

Yes, it’s very simple too. Inside the class attribute, add all the classes you want the element to have, separated by a space. For example, if you had a tag needing the classes «blueFont» and «underline,» the class attribute would be:

class=»blueFont underline»
Question

How do I space HTML code vertically?

The most basic is to simply style it with margin and/or padding. Alternatively, read into absolutely positioning an element, then you can specify exactly where on the page you want in, pixel for pixel.

See more answers

Ask a Question

200 characters left

Include your email address to get a message when this question is answered.

Submit

If your spaces turn into strange symbols on the web browser, it’s most likely caused by extra data stored in the word processing format not intended for online display. Avoid this by using a plaintext editor like Notepad or TextEdit.
CSS is a much more powerful and predictable way to lay out your page, including the spacing of your text.

Thanks for submitting a tip for review!

About This Article

Article SummaryX

1. Type «&nbsp» to add a single space.
2. Type «&ensp» to add 2 spaces.
3. Type «&emsp» to add 4 spaces.
4. Use the non-breaking space (nbsp) 4 times to insert a tab.
5. Use «br» to add a line break.

Did this summary help you?

Thanks to all authors for creating a page that has been read 5,948,131 times.

Is this article up to date?

Источник

Example

Definition and Usage

Browser Support

CSS Syntax

Property Values

Related Pages

Демо¶

Синтаксис¶

Значения¶

Спецификации¶

Описание и примеры¶

Краткая информация

Синтаксис

Значения

Песочница

Пример

Объектная модель

Спецификация

Браузеры

Sample HTML Code

About This Article

Is this article up to date?