≠ 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
Неразрывный пробел – правила для авторов.
Что такое неразрывный пробел и для чего он нужен знают не все опытные авторы, а о новичках и говорить не приходится.
Зачем нужен необычный пробел
Многие если и слышали об этом понятии, то их знания ограничиваются тем, что MS Word при наборе чисел с разделителями групп разрядов автоматически меняет обычный пробел на неразрывный.
В обычном режиме это незаметно, увидеть отличие можно лишь в специальном режиме работы программы, включить который можно, нажав на кнопку ¶ на панели инструментов.
Неразрывный пробел нужен для того, чтобы перенос с одной строки на другую был правильным. Не секрет, что текстовые редакторы и браузеры автоматически переносят текст на новую строку, когда в текущей место исчерпано. При этом руководствуются они вовсе не правилами русского языка. Неразрывный пробел нужен для того, чтобы
Когда нужен неразрывный пробел
1. Разделение групп разрядов
Как уже показано выше, при разделении разрядов между собой пробелом нужно использовать его неразрывный вариант.
2. Инициалы и фамилии
Если инициалы на одной строке, а фамилия на другой, это как минимум некрасиво. Чтобы уменьшить вероятность неверного переноса, некоторые редакторы советуют не ставить пробел между инициалами.
Однако правильнее разделить их неразрывными пробелами.
3. Сокращения
К ним относятся словосочетания и фразы
4. Слово-сокращение и имя собственное
5. Единица измерения, счетное слово, спецзнак и связанное число
Еще случаи, когда понадобится неразрывный пробел:
1. При вставке в текст тире.
Хорошо пробел перед знаком делать неразрывным, а после него обычным.
2. Бинарные математические операции
Здесь так же перед математическим знаком используется неразрывный пробел, а после него обычный.
3. Неразрывным пробелом стоит отделять от предыдущих слов одно- и двухбуквенные союзы, предлоги и слова: и, а, но, же, бы, ли, в, с, ты, я и т. д.
Как вставить в текст
Вы можете решить, что правильно использовать пробелы обязан тот, кто будет публиковать текст.
Однако уважающий себя и своих заказчиков автор сразу вставляет в текст правильные пробелы.
Вставляем неразрывный пробел в текстовом редакторе
В этом поможет сочетание клавиш Alt+255 или:
Также можно найти данную функцию на панели Word:
Чтобы контролировать употребление пробела, стоит завести привычку набирать и вычитывать тексты в режиме, когда показаны все непечатаемые символы. Иначе «на глаз» отличить обычный пробел от неразрывного не получится.
Неразрывный пробел в html
Если вам попался ответственный автор, то неразрывные пробелы в тексте уже проставлены, и вам остается только заменить их на соответствующий код –
Делать это придется вручную — при копировании текста в визуальный редактор неразрывные пробелы последний заменит на обычные.
Неразрывный пробел и СЕО
Иногда специалисты по продвижению категорично настроены против использования в тексте html-тегов неразрывного пробела и переноса строки (<br />), мотивируя такой подход тем, что это мешает продвижению.
The following two tabs change content below.
- Об авторе
- Последние публикации
css — HTML напротив неразрывного пробела
спросил
Изменено 2 года, 9 месяцев назад
Просмотрено 13 тысяч раз
В моем HTML-коде есть очень длинное слово, и я пытаюсь установить определенную точку останова только тогда, когда не хватает места. Что мне нужно, так это своего рода условный заполнитель. Как я могу достичь такого рода вещей?
- html
- css
Возможно, поможет пробел нулевой ширины Unicode: http://www.
fileformat.info/info/unicode/char/200b/index.htm
HTML-объект &# 8203; напр. overflow разобьет слово между «over» и «flow» только в том случае, если полное слово не подходит.
2
Тег (для Word BReak) будет делать то, что вы хотите.
4
Я опубликую другую альтернативу, так как это то, что я действительно искал, когда впервые нашел этот вопрос.
Вместо пробела нулевой ширины следует использовать мягкий дефис.
Из мягкого дефиса:
мягкий дефис или слоговый дефис , сокращенно SHY , представляет собой кодовую точку, зарезервированную в некоторых наборах кодированных символов с целью разбивая слова по строкам, вставляя видимые дефисы.
Кроме того, для сравнения с «Пробелом нулевой ширины» из мягкого дефиса:
Он служит невидимым маркером , используемым для указания места в тексте, где перенос через дефис допускается без принудительного разрыва строки в неудобно ставить если текст перелит.
становится видимым только после переноса слов в конце строки. Юникод мягкого дефиса семантика и реализация HTML во многом похожи на Пробел нулевой ширины Unicode, за исключением мягкого дефиса сохранит кернинг символов с обеих сторон, если не видимый . Пространство нулевой ширины, с другой стороны, не будет, как есть. считается видимым персонажем, даже если он не визуализируется, таким образом, собственные показатели кернинга.
становится видимым только
после переноса слов в конце строки. Юникод мягкого дефиса
семантика и реализация HTML во многом похожи на
Пробел нулевой ширины Unicode, за исключением мягкого дефиса
сохранит кернинг символов с обеих сторон, если не
видимый . Пространство нулевой ширины, с другой стороны, не будет, как есть.
считается видимым персонажем, даже если он не визуализируется, таким образом,
собственные показатели кернинга.Вы также можете ознакомиться со статьей в Википедии с примером текста, который меняется при изменении размера окна.
противоположность br :
с уважением
Правило Microsoft CSS «word-wrap:word-break» должно делать то, что вы хотите, и поддерживается большинством старых браузеров
https://developer.mozilla.org/en-US/docs/CSS/word-wrap
http://msdn.microsoft.com/en-us/library/ie/ms531186(v=vs.85 ).aspx
Также теперь есть версия WC3 — «overflow-wrap:break-word;» и, как вы можете прочитать в спецификации, «по устаревшим причинам UA должны рассматривать «word-wrap» как альтернативное имя для свойства «overflow-wrap», как если бы это было сокращением от «overflow-wrap».
http://www.w3.org/TR/css3-text/#overflow-wrap
http://caniuse.com/#search=overflow-wrap
Вы всегда можете перестраховаться и использовать оба
p.breaklongwords {
перенос слов: разрыв слов;
переполнение-обертка: перерыв-слово;
}
5
Зарегистрируйтесь или войдите в систему
Зарегистрируйтесь с помощью Google
Зарегистрироваться через Facebook
Зарегистрируйтесь, используя электронную почту и пароль
Опубликовать как гость
Требуется, но не отображается
Опубликовать как гость
Электронная почта
Требуется, но не отображается
HTML неразрывный пробел работает неправильно
спросил
Изменено 6 лет, 6 месяцев назад
Просмотрено 7к раз
Мне кажется, что HTML-объект для неразрывного пробела работает неправильно в моем коде.
Я использую: zvyšováním ceny – ta by negativně , но вместо тире и двух слов, соединенных вместе, я вижу некрасивый пробел в начале новой строки. У вас есть идеи, как решить эту проблему?
Я знаю о неразрывном дефисе, но, пожалуйста, помните, что есть разница между дефисом и тире.
- html
- пробел
- типографика
8
Это работает так, как должно, строка будет разрываться при наличии тире или дефиса, но не при использовании неразрывного дефиса, поэтому, добавив предотвратит разрыв строки только в этом пробеле, поэтому называется без разрыва пробела ..
.. поэтому в результате он разорвется на тире, а следующие вызывает уродливые пробелы в начале следующей строки
Удалив 2:nd , вот так, он будет работать нормально и не будет уродливого пробела в начале следующих строк
Некоторый текст с дефисом, который должен прерываться после дефиса а другой с тире – ш, который должен сломаться после тире
Демонстрация Fiddle
И если вы не хотите, чтобы она сломалась, ссылка на дубликат содержит необходимые ответы, либо используя неразрывный дефис, либо оберните его и установите обертку на пробел: nowrap
Dupe ссылка: Без переноса строки после дефиса
4
Неразрывный пробел не препятствует тому, чтобы дефис был точкой, в которой слово может разрываться, поэтому он эффективно замещает пробел до и после дефиса.