Есть ли в HTML другие пробельные коды, такие как & nbsp для полупространств, em-пробелов, пробелов и т. Д.?


149

Хотите знать, есть ли другие коды, доступные для использования в бюллетене HTML.

Я бы использовал заполнение ячеек или поля, но я новичок в этом HTML / CSS и не могу найти изменения, которое влияет как на строку основного заголовка, так и на подзаголовок под ней. Будучи электронным письмом, я не решаюсь разбираться с CSS, чтобы получить его просто так - поскольку я не знаю, что почтовым клиентам не нравится в CSS в отличие от встроенной разметки.

Для контекста я использую шаблон Mute theme from Mailchimp snip:

    <!-- language: lang-html -->
<table cellspacing="0" cellpadding="0" border="0" align="center" width="626">
    <tbody>
        <tr>
            <td valign="middle" bgcolor="#546781" height="97" background="images/header-bg.jpg" style="vertical-align: middle;">
                <table cellspacing="0" cellpadding="0" border="0" align="center" width="555" height="97">
                    <tbody>
                        <tr>
                            <td valign="middle" width="160" style="vertical-align:middle; text-align: left;">
                                <img width="70" height="70" src="http://dl.dropbox.com/…….png" style="margin:0; margin-top: 4px; display: block;" alt="" />
                            </td>
                            <td valign="middle" style="vertical-align: middle; text-align: left;">
                                <h1 class="title" style="margin:0; padding:0; font-size:30px; font-weight: normal; color: #192c45 !important;">
                                    <singleline label="Title"><span>Title of Report</span></singleline>
                                </h1>
                                <h1 class="title" style="margin:0; padding:0; font-size:15px; font-weight: normal; color: #192c45 !important;">
                                    <singleline label="Title"><span>Small Subhead</span></singleline>
                                </h1>
                            </td>
                            <td width="55" valign="middle" style="vertical-align:middle; text-align: center;">
                                <h2 class="date" style="margin:0; padding:0; font-size:13px; font-weight: normal; color: #192c45 !important; text-transform: uppercase; font-weight: bold; line-height:1;">
                                    <currentmonthname />December
                                </h2>
                                <h2 class="date" style="margin:0; padding:0; font-size:23px; font-weight: normal; color: #192c45 !important; font-weight: bold;">
                                     <currentyear />2011
                                </h2>
                            </td>

                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>

Весь адрес электронной почты в виде веб-страницы можно увидеть здесь

Ответы:


381

Да много .

В том числе, но не ограничиваются:

  • неразрывный пробел: &#160;или&nbsp;
  • узкое пространство без перерывов: &#8239; (нет ссылки на символы)
  • в пробел: &#8194;или&ensp;
  • Em Space: &#8195;или&emsp;
  • Пробел 3 на каждого: &#8196;или&emsp13;
  • 4 места на место: &#8197;или&emsp14;
  • 6-местное пространство: &#8198; (ссылка на символ недоступна)
  • пространство изображения: &#8199;или&numsp;
  • пунктуация: &#8200; или&puncsp;
  • тонкое пространство: &#8201; или&thinsp;
  • пространство для волос: &#8202; или&hairsp;

span{background-color: red;}
<table>
<tr><td>non breaking space:</td><td> <span>&#160;</span> or <span>&nbsp;</span></td></tr>
<tr><td>narrow no-break space:</td><td> <span>&#8239;</span></td></tr>
<tr><td>en space:</td><td> <span>&#8194;</span> or <span>&ensp;</span></td></tr>
<tr><td>em space:</td><td> <span>&#8195;</span> or <span>&emsp;</span></td></tr>
<tr><td>3-per-em space:</td><td> <span>&#8196;</span> or <span>&emsp13;</span></td></tr>
<tr><td>4-per-em space:</td><td> <span>&#8197;</span> or <span>&emsp14;</span></td></tr>
<tr><td>6-per-em space:</td><td> <span>&#8198;</span></td></tr>
<tr><td>figure space:</td><td> <span>&#8199;</span> or <span>&numsp;</span></td></tr>
<tr><td>punctuation space:</td><td> <span>&#8200;</span> or <span>&puncsp;</td></tr>
<tr><td>thin space:</td><td> <span>&#8201;</span> or <span>&thinsp;</span></td></tr>
<tr><td>hair space:</td><td> <span>&#8202;</span> or <span>&hairsp;</span></td></tr>
</table>


3
Firefox отображает все вышеперечисленные пробелы как одинаковую ширину, шире, чем один пробел в шрифте, за исключением nbsp, где он отображается как один пробел и накладывает неразрывный символ. Настоящий позор. Бывают случаи, когда подойдет только персонаж, например, когда заполнение контролируется или передается чему-то другому с помощью конструкций, подобныхbefore:
fyngyrz

2
@fyngyrz По крайней мере в Firefox 54 на Linux это не так (больше). Это может также зависеть от шрифта, хотя; Я проверял это на переполнении стека, где используется семейство шрифтов Arial.
Просто студент

5
Для тех, кто просто хочет посмотреть, как эти типы пробелов выглядят как jsfiddle.net/LcLg5u25
Вадим Овчинников

2
Пространство $numsp;цифр очень полезно для выравнивания чисел, потому что пространство определено так же широко, как и число в том же шрифте.
Rudey

2
Firefox на Windows сейчас в порядке (v.61) Кстати.
MSC

13

Есть коды для других пробелов, и коды как таковые работают хорошо, но сами символы являются устаревшими. Они были включены в наборы символов только благодаря их присутствию в существующих символьных данных, а не для использования в новых документах. Для некоторых комбинаций шрифта и версии браузера они могут привести к отображению общего символа непредставимого символа. Для деталей, проверьте мою страницу о пространствах Юникода .

Таким образом, использование CSS безопаснее и позволяет указать любое желаемое количество интервалов, а не только конкретную ширину пробелов фиксированной ширины. Если вы просто хотите добавить интервал вокруг элементов h2, как мне кажется, тогда установка отступов для этих элементов (изменение значения настроек отступа: 0, которые у вас уже есть) должна работать нормально.


Спасибо, я использовал встроенный атрибут <h1 class = "title" style = "margin: 0; margin-left: 2px; отступ: 0; размер шрифта: 15px; font-weight: normal; цвет: # 192c45! Важный ; "> Думаю, это наиболее безопасно, хотя семейство шрифтов - Helvetica Neue и т. Д.
wide_eyed_pupil

Но если они унаследованы и «включены в наборы символов только благодаря их присутствию в существующих символьных данных», это означает, что они не исчезнут в ближайшее время. Я действительно не вижу твоих аргументов. Я предполагаю, что любой «продвинутый» достаточно, чтобы искать «полупространства», возможно, уже решил, что поля или отступы не подходят. Я (&thinsp;4 PACK&thinsp;)согласился с моими требованиями - использование маржи или отступов было бы ужасной идеей для этого
Simon_Weaver

1
@Simon_Weaver, как я описываю, пробелы фиксированной ширины не работают надежно. Они также являются тупым инструментом: фиксированный набор значений ширины, хотя фактическая ширина зависит от шрифта, в отличие от независимых от шрифта настроек, например <span style="padding: 0 0.1em">4 PACK</span>, со свободой установки и настройки значений.
Юкка К. Корпела

1
Хотя он довольно старый, «Проблема с EM 'n EN (и другими неясными персонажами)» Питера К. Шеерина ( alistapart.com/article/emen ) по-прежнему полезна для чтения на эту тему. В частности - хотя это могло улучшиться за последние 14 лет - тот факт, что не все шрифты f̶o̶n̶t̶s̶ правильно отображают различные пространства.
Дейв Лэнд,

1
Есть также ZERO WIDTH JOINER fileformat.info/info/unicode/char/200d/index.htm, и ZERO WIDTH NON JOINERя обычно использую его чаще, чем пробелы нулевой ширины.
Reb.Cabin

9

Не уверен, что это то, на что вы ссылаетесь, но это список сущностей HTML, которые вы можете использовать:

Список ссылок на сущности символов XML и HTML

Используя содержимое в столбце «Имя», вы можете просто обернуть их в &и;

Например &nbsp;, &emsp;и т. Д.


Таким образом, в контексте размеченного текста (скажем, внутри «<p>» и «</ p>» «&» обозначает имя глифа в юникоде, верно? Что такое «;», для которого пробел не сигнализирует, когда это анализируется браузером?
wide_eyed_pupil

Закрывающая точка с запятой необязательна в некотором смысле, так как анализатор HTML по-прежнему будет видеть пробел в качестве конца ссылки. Однако в спецификации говорится, что вы «должны» заканчиваться точкой с запятой ( w3.org/TR/html5/syntax.html#character-references )
isNaN1247

PS - Я все равно буду признателен, если вы отметите это как ответ - если вы чувствуете, что он ответил на ваш вопрос :)
isNaN1247

2

Я использовал этот десятичный код Unicode &#8204;и работал. больше деталей


1
Несоединение нулевой ширины (которое вы связали) не является пробелом. Он не занимает места и не рассматривается как разделитель слов. Единственная цель, которую он имеет, - предотвращение объединения соседних символов в лигатуру, что иногда полезно в нелатинских сценариях.
duskwuff -неактивный-

1

Как насчет нормального закодированного символа пробела?

&#32;
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.