Как создать небольшие ПРОСТРАНСТВА в HTML? - PullRequest
21 голосов
/ 27 апреля 2010

Есть тире и ан тире. Есть ли "en" эквивалент & nbsp; ? Существует ли en эквивалент чистого Ascii 32 ?

Я хочу лучше написать это:

123<span class="spanen">&nbsp;</span>456<span class="spanen">&nbsp;</span>789

или это:

123<span class="spanen"> </span>456<span class="spanen"> </span>789

Ответы [ 5 ]

45 голосов
/ 27 апреля 2010

&thinsp; (тонкое пространство) должно сделать

и &nbsp; не совпадают с &mdash; (-), для разделения чисел следует использовать узкий пробел (U + 202F).

как уже упоминали другие, вам лучше использовать свойство css word-spacing для определения ширины ваших пробелов. вероятно, это хорошая идея, чтобы объединить это с white-space:no-break;

19 голосов
/ 27 апреля 2010

Не используйте взломы, которые не имеют смысла. Если вы хотите отделить некоторые слова, я предлагаю вам использовать свойство CSS word-spacing :

.strangeNumbers {
  word-spacing: 0.5em;
}
<span class="strangeNumbers">123 456</span>
13 голосов
/ 27 апреля 2010

Символ Unicode U + 2002 EN SPACE (&#x2002;, &#8194; или как ссылка на сущность &ensp;) - это пробел с шириной en.

3 голосов
/ 14 января 2017
&thinsp;

... и другие нестандартные пробелы неправильно реализованы в некоторых фиксированных шрифтах.

Это приведет к неконтролируемому загрязнению вашего рендеринга в конце веб-браузера, и вы не сможете исправить это, если будете точно знать шрифт, потому что вы не можете контролировать, какой фактический шрифт используется веб-браузером. & mdash; даже если вы укажете имя шрифта или семейство шрифтов, это не означает, что у них такой же шрифт, как у у вас .

Но вы можете создать 100% -совместимое пространство любого размера, но это очень легко. Значение em представляет собой current font-size. Это высота, но какой бы ни была ширина шрифта, она всегда постоянна относительно высоты шрифта с фиксированной шириной. Так что вы можете воспользоваться этим.

Вот как сделать 1/2 ширины, неразрывный пробел в контексте шрифта фиксированной ширины, который работает с everything . Я показываю, что он реализован в опции style="", но, конечно, вы можете создать CSS-класс, чтобы сделать его использование менее неуклюжим:

<span style="font-size: .5em;">&nbsp;</span>

Вот как сделать ширину 1/4, неразрывную пробел:

<span style="font-size: .25em;">&nbsp;</span>

... и т. Д.

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

Если вам нужен пробел, который на шире , чем один пробел, используйте комбинацию пробелов и более коротких пробелов. В то время как будет расширяться, если вы будете использовать что-то вроде 1.5em, вы также получите более высокое пространство, и это повлияет на межстрочный интервал.

Хотя это решение раздражающе громоздко, оно имеет желательный атрибут всегда working & mdash; чего не делают остальные.

2 голосов
/ 27 апреля 2010

Вы можете изменить свой CSS следующим образом:

.spanen{word-spacing:.6em;}
...