Неразрывные символы

Что делать, когда браузер переносит часть текста на следующую строку в самом неподходящем месте, например, разрывая телефон пополам? Pапретить браузеру ставить перенос там, где мы не хотим, можно как минимум, двумя способами:

  1. Обернуть часть текста в тег со стилем white-space: nowrap:

    <span style="white-space: nowrap">+7 (977) 123-45-45</span>
    

    — теперь весь телефон не будет переноситься на следующую строку. Особенно хорошо этот способ подходит для телефонов.

    Конечно, это будет не единственный случай, где это понадобится, поэтому логично будет сделать CSS класс:

    .nwrp { white-space: nowrap }
    
    <span class="nwrp">+7 (977) 123-45-45</span>
    
  2. «Склеить» части «неразрывным» Unicode-символом. Таких символов штук 7, но чаще всего нужны всего 2: неразрывный пробел и неразрывный дефис.

    Этот способ лучше подходит для избавления от «висячих» предлогов и частиц. В типографском наборе текста принято не отрывать одно- и двусложные предлоги, частицы, союзы и т. п., типа «в», «с», «из», от следующего слова. Также стоит избегать переноса на следующую строку единиц измерения.

Как поставить Unicode-символ

  1. Копировать этот символ из документации HTML. Этот вариант лучше, т. к. работает, даже если нельзя использовать HTML теги.

  2. Ввести этот символ как HTML-код:

    ООО&nbsp;«Эппл»    // неразрывный пробел (мнемоника)
    ООО&#160;«Эппл»    // неразрывный пробел
    Баден&#8209;Баден  // неразрывный дефис
    

Ссылки

Редактировать