≠ C2A0 / Хабр
Я только что потратил более двух часов на устранение, казалось бы, простой проблемы с HTML. Когда я скопировал и вставил небольшой раздел HTML, веб-браузер отображал только что вставленный раздел не так, как оригинал. Горизонтальный интервал между некоторыми элементами был немного другим, из-за чего вся страница выглядела неправильно. Но как такое могло быть? Два раздела HTML были идентичны — новый был буквально копией старого.
Эта простая на первый взгляд проблема бросала вызов всем моим попыткам ее объяснить. Я придумал множество замечательных теорий: проблемы с моими классами CSS или с полями и отступами. Несоответствующие теги HTML. Ошибки браузера. Я попробовал три разных браузера и во всех получил одинаковые результаты.
Чувствуя себя сбитым с толку, я снова посмотрел на два раздела HTML в редакторе WordPress (текстовое представление) и подтвердил, что они полностью идентичны. Затем я попробовал встроенные в Firefox инструменты веб-разработчика для просмотра отображаемых элементов страницы и сравнил все их свойства CSS.
Идентичны, но каким-то образом визуализированы по-разному. Я использовал инструменты разработчика, чтобы проверить точный HTML, полученный с моего веб-сервера, снова проверил два раздела и убедился, что они символьно идентичны. Инструмент Firefox «источник страницы» также подтвердил, что эти два раздела полностью идентичны.
К этому моменту я был готов обвинить космические лучи или магию вуду. Я обнаружил, что каждый раз, когда я копирую любой похожий раздел HTML, только что вставленный раздел будет отображаться в браузере с неправильным интервалом между элементами. Как такое могло быть? Затем я попробовал W3C Validator, который обнаружил некоторые другие проблемы с моей страницей, но ничего не могло объяснить такое поведение. И снова он подтвердил, что, несмотря на разную визуализацию в браузере, два раздела HTML идентичны.
Ясно, что что-то не складывалось. Я использовал curl для загрузки веб-страницы со своего веб-сервера, просмотрел локальную копию и увидел то же поведение, что и раньше.
Но когда я открыл сохраненный документ .html с помощью шестнадцатеричного редактора, я наконец получил ответ. Эти два раздела HTML не были идентичными: в одном разделе использовался другой тип пробела, чем в другом.
Что за черт.
Я обнаружил, что исходный раздел HTML содержит неразрывные пробелы. Но вместо того, чтобы кодировать их с помощью & n b s p; они были закодированы юникод-символами C2A0. Не знаю, когда и как это произошло, но виню в этом WordPress. При просмотре этого раздела в редакторе HTML WordPress пробелы C2A0 выглядели как обычные пробелы, и при копировании раздела внутри редактора неразрывные пробелы автоматически преобразовывались в нормальные пробелы с шестнадцатеричным значением 20. Таким образом, скопированная версия отображалась по-другому, хотя исходный HTML оказался таким же.
Это похоже на ремейк 0 ≠ О, только хуже. Я даже не знал, что неразрывные пробелы имеют свою кодировку в Юникоде — я подумал, что & n b s p; был единственным способом их закодировать.
Я снова изменил HTML, чтобы использовать & n b s p; и теперь все работает нормально.
Я удивлен, сколько разных инструментов не смогли выявить это тонкое, но важное различие между типами пробелов в исходном HTML-коде. Редактор HTML WordPress не смог показать или правильно обработать разницу. Сбой инструментов веб-разработчика Firefox и инструментов источника страниц. Ошибка исходного представления валидатора W3C. Curl плюс шестнадцатеричный редактор был единственным способом окончательно установить достоверную информацию о точном содержании исходного кода HTML.
Читать еще
- Неразрывный пробел HTML
white-space — CSS | MDN
Свойство white-space управляет тем, как обрабатываются пробельные символы внутри элемента.
Примечание: Для управления переносами внутри слов используйте overflow-wrap, word-break или hyphens.
/* Ключевые значения */ white-space: normal; white-space: nowrap; white-space: pre; white-space: pre-wrap; white-space: pre-line; white-space: break-spaces; /* Глобальные значения */ white-space: inherit; white-space: initial; white-space: unset;
| Начальное значение | normal |
|---|---|
| Применяется к | все элементы |
| Наследуется | да |
| Обработка значения | как указано |
| Animation type | discrete |
Свойство white-space определяется, как одно ключевое слово, выбранное из списка значений, указанных ниже.
Значения
normalПоследовательности пробелов объединяются в один пробел. Символы новой строки в источнике обрабатываются, как отдельный пробел. Применение данного значения при необходимости разбивает строки для того, чтобы заполнить строчные боксы.
nowrapОбъединяет последовательности пробелов в один пробел, как значение
normal, но не переносит строки (оборачивание текста) внутри текста.preПоследовательности пробелов сохраняются так, как они указаны в источнике. Строки переносятся только там, где в источнике указаны символы новой строки и там, где в источнике указаны элементы
<br>.pre-wrapПоследовательности пробелов сохраняются так, как они указаны в источнике. Строки переносятся только там, где в источнике указаны символы новой строки и там, где в источнике указаны элементы
<br>, и при необходимости для заполнения строчных боксов.pre-lineПоследовательности пробелов объединяются в один пробел. Строки разбиваются по символам новой строки, по элементам
<br>, и при необходимости для заполнения строчных боксов. .break-spacesПоведение идентично
pre-wrapсо следующими отличиями:- Последовательности пробелов сохраняются так, как они указаны в источнике, включая пробелы на концах строк.
- Строки переносятся по любым пробелам, в том числе в середине последовательности пробелов.
- Пробелы занимают место и не висят на концах строк, а значит влияют на внутренние размеры (min-content и max-content).
.В приведённой ниже таблице указано поведение различных значений свойства white-space:
| Новые строки | Пробелы и табуляция | Перенос текста по словам | Пробелы в конце строки | |
|---|---|---|---|---|
normal | Объединяются в одну | Объединяются в один пробел | Переносится | Удаляются |
nowrap | Объединяются в одну | Объединяются в один пробел | Не переносится | Удаляются |
pre | Сохраняются как в источнике | Сохраняются как в источнике | Не переносится | Сохраняются как в источнике |
pre-wrap | Сохраняются как в источнике | Сохраняются как в источнике | Переносится | Висят |
pre-line | Сохраняются как в источнике | Объединяются в один пробел | Переносится | Удаляются |
break-spaces | Сохраняются как в источнике | Сохраняются как в источнике | Переносится | Переносятся |
Формальный синтаксис
white-space =
normal | (en-US)
pre | (en-US)
nowrap | (en-US)
pre-wrap | (en-US)
break-spaces | (en-US)
pre-line
Основной пример
code {
white-space: pre;
}
Перенос строк внутри элементов
<pre>pre {
word-wrap: break-word; /* IE 5. 5-7 */
white-space: pre-wrap; /* текущие браузеры */
}
| Specification |
|---|
| CSS Text Module Level 3 # white-space-property |
BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
Want to get more involved?
Learn how to contribute.
This page was last modified on by MDN contributors.
Отступы и интервалы текста CSS
❮ Предыдущий Далее ❯
Интервал текста
В этой главе вы узнаете о следующих свойствах:
-
text-indent -
межбуквенный интервал -
высота строки -
межсловный интервал -
пробел
Отступ текста
Свойство text-indent используется для указания отступа первой строки текста:
Пример
p {
text-indent: 50px;
}
Попробуйте сами »
Межбуквенный интервал
Свойство межбуквенный интервал используется для указания интервала между символами в тексте.
В следующем примере показано, как увеличить или уменьшить расстояние между символами:
Пример
h2 {
межбуквенный интервал: 5 пикселей;
}
h3 {
letter-spacing: -2px;
}
Попробуйте сами »
Высота строки
Свойство высота строки используется для указания интервала между строками:
Пример
p.small {line-height: 0,8;
}
p.big {
высота строки: 1,8;
}
Попробуйте сами »
Word Spacing
Свойство word-spacing используется для указания пробела между
слова в тексте.
В следующем примере показано, как увеличить или уменьшить расстояние между слов:
Пример
p.one {
word-spacing: 10px;
}
p.
two {
word-spacing: -2px;
}
Попробуйте сами »
Пробел
Свойство white-space указывает, как обрабатывается пробел внутри элемента.
В этом примере показано, как отключить перенос текста внутри элемента:
Пример
p {
white-space: nowrap;
Попробуйте сами »
Свойства интервалов текста CSS
| Свойство | Описание |
|---|---|
| межбуквенный интервал | Задает расстояние между символами в тексте |
| высота строки | Задает высоту строки |
| отступ текста | Задает отступ первой строки в текстовом блоке |
| пробел | Указывает, как обрабатывать пробелы внутри элемента |
| межсловный интервал | Задает пробел между словами в тексте |
❮ Предыдущий Следующий ❯
ВЫБОР ЦВЕТА
Лучшие учебники
Учебное пособие по HTMLУчебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3.
CSS Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебное пособие по Java
Учебное пособие по C++
Учебное пособие по jQuery
Лучшие ссылки
HTML ReferenceCSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference
7 Top0 Examples
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery
FORUM | О
W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения.
Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.
Авторское право 1999-2023 по данным Refsnes. Все права защищены.
W3Schools использует W3.CSS.
Тень текста CSS
❮ Назад Далее ❯
Тень текста
Свойство text-shadow добавляет тень к тексту.
В простейшем случае вы указываете только горизонтальную тень (2 пикселя) и вертикальную тень (2 пикселя):
Текстовый эффект тени!
Пример
h2
{
text-shadow: 2px 2px;
}
Попробуйте сами »
Затем добавьте цвет (красный) к тени:
Текстовый эффект тени!
Пример
h2
{
text-shadow: 2px 2px красный;
}
Попробуйте сами »
Затем добавьте к тени эффект размытия (5 пикселей):
Текстовый эффект тени!
Пример
h2
{
text-shadow: 2px 2px 5px красный;
}
Попробуйте сами »
Другие примеры тени текста
Пример 1
Тень текста на белом тексте:
h2 {
цвет: белый;
text-shadow: 2px 2px 4px #000000;
}
Попробуйте сами »
Пример 2
Text-shadow с красным неоновым свечением:
h2 {
text-shadow: 0 0 3px #ff0000; Пример 3
}
Попробуйте сами »
Пример 4
h2 {
цвет: белый;
text-shadow: 1px 1px 2px черный, 0 0 25px синий, 0
0 5px темно-синий;
}
Попробуйте сами »
Совет: Перейдите к нашей главе «Шрифты CSS», чтобы узнать, как изменить шрифты, размер и стиль текста.
Совет: Перейдите к нашей главе Текстовые эффекты CSS, чтобы узнать о различных текстовых эффектах.
Проверьте себя с помощью упражнений
Упражнение:
Измените цвет текста всех элементов
<стиль>
п {
: красный;
}
<тело>
Это заголовок
Это абзац
Это абзац
Начать упражнение
Свойство тени текста CSS
| Свойство | Описание |
|---|---|
| тень текста | Указывает эффект тени, добавляемый к тексту |
❮ Предыдущий Далее ❯
ВЫБОР ЦВЕТА
Лучшие учебники
Учебное пособие по HTMLУчебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3.CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебное пособие по Java
Учебное пособие по C++
Учебное пособие по jQuery
900
Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.