[а-яА-ЯЁё-]+ — одна и более буква кириллицы в верхнем и нижнем регистре или знака -\s — пробельный символ[а-яА-ЯЁё-]+ — одна и более буква кириллицы в верхнем и нижнем регистре или знака -Под данное регулярное выражение будет валидным ввод - - Поэтому тире так же следует добавить в отдельную группу, что бы после него шли буквенные символы:
[а-яА-ЯЁё]+(-[а-яА-ЯЁё-]+)?\s[а-яА-ЯЁё-]+(-[а-яА-ЯЁё-]+)?
Теперь тире может быть установлено только в середину слова
<form>
<input
name="i_like"
required
pattern="[а-яА-ЯЁё]+(-[а-яА-ЯЁё-]+)?\s[а-яА-ЯЁё-]+(-[а-яА-ЯЁё-]+)?"
title="Кириллица разделенная одиночным пробелом"
>
<button>Тык</button>
</form>2
Зарегистрируйтесь или войдите
Регистрация через Facebook
Регистрация через почту
Отправить без регистрации
Почта
Необходима, но никому не показывается
Отправить без регистрации
Почта
Необходима, но никому не показывается
Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки
Web APIs — Как пробельные символы обрабатываются в HTML,CSS и в DOM Наличие пробельных элементов в DOM может вызвать проблемы с версткой и затруднить манипуляции с деревом контента неожиданными способами,в зависимости от того,где он расположен.
Наличие пробелов в модели DOM может вызвать проблемы с макетом и неожиданно затруднить манипулирование деревом контента, в зависимости от того, где оно расположено. В этой статье исследуется, когда могут возникнуть трудности, и рассматривается, что можно сделать для устранения возникающих проблем.
Что такое пробельные символы?
Пробел-это любая строка текста,состоящая только из пробелов,табуляции или перевода строки (точнее,последовательности CRLF,возврата каретки или перевода строки).Эти символы позволяют вам форматировать ваш код таким образом,чтобы он был легко читаем как вами,так и другими людьми.На самом деле,большая часть нашего исходного кода полна этих пробельных символов,и мы избавляемся от них только на этапе сборки,чтобы уменьшить размер загружаемого кода.
HTML в значительной степени игнорирует пробельные символы?
В случае HTML пробельные символы в основном игнорируются-пробелы между словами рассматриваются как один символ,а пробелы в начале и конце элементов и вне элементов игнорируются.
Возьмем следующий минимальный пример:<!DOCTYPE html> <h2> Hello World! </h2>
Этот исходный код содержит пару переводов строки после DOCTYPE и кучу пробелов до, после и внутри элемента <h2> , но браузеру, похоже, все равно, и он просто показывает слова «Hello World! » как будто этих персонажей вообще не было:
Это делается для того,чтобы пробельные символы не влияли на макет вашей страницы.Создание пространства вокруг и внутри элементов-это работа CSS.
Что
же произойдет с пробелами?Однако они не просто исчезают.
Любые пробельные символы,которые находятся вне элементов HTML в исходном документе,представлены в DOM.Это необходимо для того,чтобы редактор мог сохранять форматирование документов.Это означает,что:
- Будут некоторые текстовые узлы,содержащие только пробелы,и
- Некоторые текстовые узлы будут содержать пробелы в начале или конце.
Возьмем,к примеру,следующий документ:
<!DOCTYPE html>
<html>
<head>
<title>My Document</title>
</head>
<body>
<h2>Header</h2>
<p>
Paragraph
</p>
</body>
</html>
Дерево DOM для этого выглядит следующим образом:
Сохранение пробельных символов в DOM полезно во многих отношениях,но есть некоторые места,где это затрудняет реализацию определенных макетов и создает проблемы для разработчиков,которые хотят итеративно просматривать узлы в DOM.
Как CSS обрабатывает пробельные символы?
Большинство пробельных символов игнорируются, но не все. В предыдущем примере один из пробелов между «Hello» и «World!» все еще существует, когда страница отображается в браузере. В движке браузера есть правила, которые определяют, какие пробельные символы полезны, а какие нет — они, по крайней мере частично, указаны в CSS Text Module Level 3 , и особенно в части, касающейся свойства пробела CSS и деталей обработки . но мы также предлагаем более простое объяснение ниже.
Example
Рассмотрим другой пример.Чтобы было проще,мы добавили комментарий,в котором все пробелы обозначены ◦,все табуляции-⇥,а все переносы строк-⏎:
This example:
<h2> Hello
<span> World!</span> </h2>
<!--
<h2>◦◦◦Hello◦⏎
⇥⇥⇥⇥<span>◦World!</span>⇥◦◦</h2>
-->
отображается в браузере следующим образом:
Explanation
Элемент <h2> содержит только встроенные элементы.
На самом деле он содержит:
- Текстовый узел (состоящий из нескольких пробелов,слова «Hello» и нескольких табуляций).
- Встроенный элемент (
<span>, который содержит пробел и слово «World!»). - Еще один текстовый узел (состоящий только из табуляций и пробелов).
Из-за этого он устанавливает то, что называется встроенным контекстом форматирования . Это один из возможных контекстов рендеринга макета, с которым работают механизмы браузера.
В этом контексте обработка пробельных символов может быть обобщена следующим образом:
- Во-первых,все пробелы и табуляции непосредственно перед и после перевода строки игнорируются,поэтому,если мы возьмем наш пример разметки из предыдущего раздела и применим это первое правило,мы получим:
<h2>◦◦◦Hello⏎ <span>◦World!</span>⇥◦◦</h2>
- Далее все символы табуляции обрабатываются как символы пробела,поэтому пример становится:
<h2>◦◦◦Hello⏎ <span>◦World!</span>◦◦◦</h2>
- Далее переносы строк преобразуются в пробелы:
<h2>◦◦◦Hello◦<span>◦World!</span>◦◦◦</h2>
- После этого любой пробел,непосредственно следующий за другим пробелом (даже в двух отдельных инлайн-элементах),игнорируется,так что в итоге мы получаем:
<h2>◦Hello◦<span>World!</span>◦</h2>
- И,наконец,последовательности пробелов в начале и конце строки удаляются,так что в итоге мы получаем следующее:
<h2>Hello◦<span>World!</span></h2>
Именно поэтому люди,посещающие веб-страницу,увидят фразу «Hello World!»,красиво написанную в верхней части страницы,а не странное «Hello» с отступом,за которым следует еще более странное «World!» на строке ниже.
Примечание: Firefox DevTools поддерживает выделение текстовых узлов, начиная с версии 52, что упрощает определение того, какие именно узлы содержат пробельные символы. Узлы с чистым пробелом помечаются меткой «пробел».
Пробельные символы в контекстах форматирования блоков
Выше мы просто рассмотрели элементы, содержащие встроенные элементы, и контексты встроенного форматирования. Если элемент содержит хотя бы один блочный элемент, то вместо этого он устанавливает то, что называется контекстом форматирования блока .
В этом контексте пробельные символы рассматриваются совершенно по-разному.
Example
Давайте рассмотрим пример,чтобы объяснить,как это сделать.Мы пометили пробельные символы,как и раньше.
У нас есть 3 текстовые узлы, содержащие только пробелы, один перед первым <divs> , и один после второго <div> .
<body> <div> Hello </div> <div> World! </div> </body> <!-- <body>⏎ ⇥<div>◦◦Hello◦◦</div>⏎ ⏎ ◦◦◦<div>◦◦World!◦◦</div>◦◦⏎ </body> -->
Это выглядит так:
Explanation
Мы можем кратко описать,как здесь обрабатываются пробельные символы следующим образом (в разных браузерах могут быть небольшие различия в точном поведении,но в основном это работает):
- Поскольку мы находимся внутри контекста блочного форматирования, все должно быть блоком, поэтому наши 3 текстовых узла также становятся блоками, как и 2
<div>.
Блоки занимают всю доступную ширину и располагаются друг над другом, что означает, что в итоге мы получаем макет, состоящий из этого списка блоков:<block>⏎⇥</block> <block>◦◦Hello◦◦</block> <block>⏎◦◦◦</block> <block>◦◦World!◦◦</block> <block>◦◦⏎</block>
- Это упрощается путем применения к этим блокам правил обработки пробельных символов в контекстах инлайн-форматирования:
<block></block> <block>Hello</block> <block></block> <block>World!</block> <block></block>
- 3 пустых блока, которые у нас теперь есть, не будут занимать места в окончательном макете, потому что они ничего не содержат, поэтому в итоге мы получим только 2 блока, занимающих место на странице. Люди, просматривающие веб-страницу, видят слова «Hello» и «World!». на 2 отдельных строках, так как вы ожидаете, что 2
<div>будут выложены. Движок браузера по существу проигнорировал все пробелы, которые были добавлены в исходный код.
Блоки занимают всю доступную ширину и располагаются друг над другом, что означает, что в итоге мы получаем макет, состоящий из этого списка блоков:
Пробелы между инлайн-и инлайн-блочными элементами
Давайте перейдем к рассмотрению нескольких проблем,которые могут возникнуть из-за пробельных элементов,и что можно с ними сделать.Прежде всего,мы рассмотрим,что происходит с пробелами между инлайн-и инлайн-блочными элементами.Фактически,мы уже видели это в нашем самом первом примере,когда описывали,как пробельные элементы обрабатываются внутри контекстов форматирования inline.
Мы сказали, что существуют правила игнорировать большинство символов, но символы, разделяющие слова, остаются. Когда вы имеете дело только с блочными элементами, такими как <p> , которые содержат только встроенные элементы, такие как <em> , <strong> , <span> и т. д., вы обычно не заботитесь об этом, потому что лишние пробелы это делает его макет полезным для разделения слов в предложении.
Однако это становится более интересным, когда вы начинаете использовать элементы inline-block .
Эти элементы ведут себя как встроенные элементы снаружи и блоки внутри, и часто используются для отображения более сложных частей пользовательского интерфейса, чем просто текст, бок о бок в одной строке, например, элементы меню навигации.
Поскольку это блоки,многие ожидают,что они будут вести себя так же,но на самом деле это не так.Если между соседними инлайн-элементами есть пробелы форматирования,это приведет к появлению пробелов в макете,как и пробелы между словами в тексте.
Example
Рассмотрим этот пример (опять же,мы включили комментарий HTML,который показывает пробельные символы в HTML):
.people-list {
list-style-type: none;
margin: 0;
padding: 0;
}
.people-list li {
display: inline-block;
width: 2em;
height: 2em;
background: #f06;
border: 1px solid;
}
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--
<ul>⏎
◦◦<li></li>⏎
◦◦<li></li>⏎
◦◦<li></li>⏎
◦◦<li></li>⏎
◦◦<li></li>⏎
</ul>
-->
Это выглядит следующим образом:
Возможно,вам не нужны промежутки между блоками-в зависимости от сценария использования (это список аватаров или горизонтальные кнопки навигации?),вы,вероятно,хотите,чтобы стороны элементов были вровень друг с другом,и чтобы можно было самостоятельно контролировать любые промежутки.
Инспектор HTML Firefox DevTools выделит текстовые узлы,а также покажет,какую именно площадь занимают элементы-полезно,если вы задаетесь вопросом,в чем причина проблемы,и,возможно,думаете,что у вас там есть дополнительные поля или что-то в этом роде!
Solutions
Есть несколько способов обойти эту проблему:
Используйте Flexbox для создания горизонтального списка элементов вместо того, чтобы пытаться использовать inline-block решение. Это сделает все за вас и, безусловно, является предпочтительным решением:
ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
}
Если вам нужно полагаться на inline-block , вы можете установить font-size , поэтому размер блока также будет 0). rems будет здесь хорошим выбором:
ul {
font-size: 0;
...
}
li {
display: inline-block;
width: 2rem;
height: 2rem;
. ..
}
..
}
Или вы можете установить отрицательное поле для элементов списка:
li {
display: inline-block;
width: 2rem;
height: 2rem;
margin-right: -0.25rem;
}
Вы также можете решить эту проблему,поместив все элементы списка на одну строку в исходном тексте,что приведет к тому,что узлы пробелов не будут создаваться в первую очередь:
<li></li><li></li><li></li><li></li><li></li>
© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Whitespace
Web APIs
-
Манипулирование таблицей с помощью DOM и CSS
В этом примере представлены два новых атрибута DOM.
-
Использование ядра W3C DOM уровня 1
Ядро DOM уровня 1 W3C — это API для управления деревьями документов HTML и XML (среди других древовидных типов).
-
Обход DOM и пробельные символы
При попытке выполнить манипуляцию с DOM в JavaScript вы также можете столкнуться с проблемами из-за пробельных узлов.
-
DocumentFragment
Интерфейс DocumentFragment представляет минимальный объект,у которого нет родителя.
- 1
- …
- 1177
- 1178
- 1179
- 1180
- 1181
- …
- 6050
- Next
Есть ли пустой символ HTML (включая пробелы) во всех браузерах?
Задавать вопрос
спросил
Изменено 1 месяц назад
Просмотрено 106 тысяч раз
Есть ли символ HTML, который во всех (основных) браузерах (плюс, к сожалению, IE8) ничего не отображает и не добавляет дополнительного пробела?
Итак, альтернатива , но который не добавляет пробелов на страницу и никогда не будет отображаться как уродливый маркер «неопознанный символ» или ? .
Почему: в моем случае я пытаюсь обойти проблему старой проприетарной CMS, которая удаляет пустые, но необходимые элементы HTML, которые требуются, потому что другие части системы будут заполнять их динамически.
Представьте что-то вроде (упрощенный тривиальный пример) , который заполняется именем пользователя, если пользователь вошел в систему, но эта CMS старой школы считает его пустым и удаляет его.
- HTML
- кроссбраузерный
2
Кажется, есть два варианта, которые больше всего отвечают всем требованиям. Кажется, что они ничего не показывают в , но в некоторых случаях они (особенно второй вариант) могут незначительно влиять на копирование/вставку и разбиение слов.
Пробел нулевой ширины
или , который ведет себя так же, как (теперь в HTML5) — используется для разрыва слов в определенных точках без изменения отображения слов.
Этот текст полон
спанов с символамидействияrs, которые влияют& #8203;ct word breakкороль, но не появляетсяОсобенно в das super
doupercrazylongworden.
Вроде нормально работает в современных браузерах и IE7+ (на IE6 не тестировалось).
Мягкий дефис
— как пробел нулевой ширины, но (теоретически) добавляет дефис, когда он разрывает слово через строку.
Этот текст полон
спанов с charактерамиrs, которые влияютct слово ломаетсякороль, но не появляетсяОсобенно в das super
doupercrazylongworden.Пример, где слово superdoupercrazylongword не содержит пробелов.
Отлично работает в современных браузерах и IE7+ (не тестировалось в IE6), хотя, как отмечают некоторые комментарии, существуют проблемы с тем, что они превращаются в обычные дефисы при копировании и вставке, например, вот как он вставляется из Chrome в Блокнот в Windows 8.
1:
Кажется, внутри интервала никогда не добавляется дефис (но все же лучше использовать пробелы нулевой ширины, если это возможно).
Изменить: я нашел более старый ответ SO, в котором они обсуждаются как решение другой проблемы, которая предполагает, что они надежны, за исключением возможных особенностей копирования / вставки.
Единственная другая проблема с ними, которую я смог найти в ходе исследования, заключается в том, что, по-видимому, некоторые поисковые системы могут рассматривать слова, содержащие их, как разделенные (например, awesome могут соответствовать поисковым запросам awe и some вместо awesome ).
6
Есть два символа, которые являются графическими символами, но имеют нулевую ширину: U+200B НУЛЕВАЯ ШИРИНА ПРОБЕЛ и U+FEFF НУЛЕВАЯ ШИРИНА БЕЗ РАЗРЫВА ПРОБЕЛ. Первый действует как символ пробела, так что он является разделителем между словами и позволяет разрывать строки при форматировании, тогда как последний явно запрещает разрывы строк.
Это зависит от цели и контекста, который вы должны использовать. Может быть представлено в HTML как и .
Там символы хорошо работают в большинстве ситуаций просмотра. Однако в IE 6 они, как правило, отображаются как маленькие прямоугольники, поскольку IE 6 не знает этих символов и пытается отображать их так, как если бы они были графическими символами (в которых отсутствуют глифы).
В HTML разрешены также управляющие символы, такие как U+200E LEFT-TORIGHT MARK и U+200D ZERO WIDTH JOINER. У них нет рендеринга как такового, хотя они могут влиять на рендеринг графических символов, например. устанавливая направление письма, влияя на поведение лигатуры и т. д. Из-за возможности таких эффектов может быть рискованно использовать их в качестве «фиктивных» символов.
1
Как вставлять пробелы/табуляции в текст с помощью HTML/CSS
спросил
Изменено 11 месяцев назад
Просмотрено 1,5 м раз
Возможные способы:
.
.. или
style="white-space:pre"
Что-нибудь еще?
- html
- css
- вкладки
- пробел
- до
4
Чтобы вставить табуляцию между двумя словами/предложениями, я обычно использую
и
В случаях, когда ширина/высота пространства превышает Я обычно использую:
Для горизонтальной проставки:
Для вертикальной прокладки:
1
Вы можете использовать для пробелов, < для < (меньше чем, номер объекта < ) и > для > (больше, чем номер объекта > ).
Полный список можно найти на Объекты HTML .
0
Попробуйте .
В соответствии с документацией по адресу Специальные символы :
Объекты персонажей
иобозначают en пробел и em пространство соответственно, где en пробел составляет половину размера точки, а em пробел равен размеру пункта текущего шрифта. Для фиксированного шага шрифты, пользовательский агент может рассматривать пространство en как эквивалентное A символ пробела, а пробел em эквивалентен двум пробелам персонажи.
Типы пробелов в HTML
Создает четыре пробела между текстом-
Создает два пробела между текстом -
Создает обычный пробел между текстом -
создает узкое пространство (аналогично обычному пространству, но небольшое отличие - "&тонкий";
интервал между предложениями - ""
Эта ссылка может вам помочь.
Посетите [https://hea-www.harvard.edu/~fine/Tech/html-sentences.html]
1
Мне нравится использовать это:
В вашем CSS:
.tab {
дисплей: встроенный блок;
поле слева: 40px;
}
В вашем HTML:
Некоторый текст Текст с вкладками
2
<р> Первая строка этого абзаца будет иметь отступ около пяти символов, аналогичный отступу с табуляцией.
Первая строка этого абзаца будет иметь отступ примерно в пять символов, аналогичный отступу с табуляцией.
Дополнительную информацию см. в статье «Как использовать HTML и CSS для создания табуляции и интервалов» .
Сделайте шаг вперед, чем @Ivar, и стилизуйте мой собственный пользовательский тег так... Мне легче запомнить и ввести «вкладку».
вкладка {
отображение: встроенный блок;
поле слева: 40px;
}
И реализация HTML.
..
Левая сторона пробела
Правая сторона пробела
И мой скриншот...
Вы также можете использовать:
padding-left padding-right обивка обивка
Альтернативно называемый фиксированным или жестким пробелом, неразрывный пробел (NBSP) используется в программировании и обработке текстов для создания пробела в строке, который нельзя разорвать переносом слов.
С HTML, позволяет создавать несколько пробелов, которые видны на веб-странице, а не только в исходном коде.
Вы можете сделать это через отступ, например , вы можете проверить больше способов здесь - пустое место в html
1
Если вам нужны табуляции для выравнивания элементов в некоторых строках, вы можете использовать Помещение каждой строки в Это выровняет их, и они будут выглядеть красиво 🙂 3 Используйте стандартную вкладку CSS Чтобы вставить символ табуляции (если стандартная клавиша табуляции, переместите курсор), нажмите Alt + 0 + 0 + 9 Мой предпочтительный: Посмотрите фрагмент или быстро найденный пример на вкладке. Это сработало для меня: В моем CSS у меня есть: Затем в HTML я просто использую свои вкладки: Пробел? Не могли бы вы просто использовать прокладку? Это идея. Вот как вы можете добавить «пустую область» вокруг вашего элемента. Таким образом, вы можете использовать следующие теги CSS: Вы можете использовать этот код Посмотрите пример здесь: https://www.w3schools.com/charsets/tryit.asp?deci=8287&ent=ThickSpace Ответ пользователя 8657661 ближе всего к моим потребностям (выстраивание вещей в несколько строк). Однако мне не удалось заставить код примера работать, как указано, и мне нужно было изменить его следующим образом: Если вам нужны числа, выровненные по правому краю, вы можете изменить .
... 
И каждый элемент внутри этой строки в ... размером . .element {
-moz-размер вкладки: 4;
размер вкладки: 4;
}
*{-moz-tab-size: 1; размер табуляции: 1;}
.t1{
-moz-размер вкладки: 1;
размер вкладки: 1;
}
.t2{
-moz-размер вкладки: 2;
размер вкладки: 2;
}
.t4{
-moz-размер вкладки: 4;
размер вкладки: 4;
}
pre {граница: 1px с точкой;}
tab = {пробел} по умолчанию
<пред>
одна вкладка текст
две вкладки текста
табуляция = 1 пробел
<пред> одна вкладка текст
две вкладки текста табуляция = 2 пробела
<пред> одна вкладка текст
две вкладки текста табуляция = 4 пробела
<пред> одна вкладка текст
две вкладки текста tab0 { position:absolute;left:25px; }
tab1 { позиция: абсолютная; левая: 50px; }
tab2 { позиция: абсолютная; левая: 75px; }
tab3 { позиция: абсолютная; левая: 100px; }
tab4 { позиция: абсолютная; левая: 125px; }
tab5 { позиция: абсолютная; левая: 150 пикселей; }
tab6 { позиция: абсолютная; левая: 175px; }
tab7 { позиция: абсолютная; левая: 200px; }
tab8 { позиция: абсолютная; левая: 225px; }
tab9 { позиция: абсолютная; левая: 250px; }
tab10 { позиция: абсолютная; левая: 275px; }
Корм для собак
padding: 5px;
padding-top: 5px;
нижний отступ: 5 пикселей;
отступ слева: 5 пикселей;
отступ справа: 5px;
, чтобы добавить пробел в содержимое HTML. Для табуляции используйте его 5 или более раз.
<голова>
<стиль>
.tab9 {позиция: абсолютная; слева: 150 пикселей; }
<тело>
Корм для собак: 30 долларов США
Молоко магнезии:$30
Набор для пиццы:$5
Маунт-Дью $1,75
left:150px на right:150px , но вам нужно будет изменить число в зависимости от ширины экрана (как написано, числа будут 150 пикселей от правый край экрана).