В HTML, можно ли вставить подсказку для переноса слов?

Представьте, что у меня есть длинная многословная строка текста в DIV:

Привет, дорогой клиент. Пожалуйста, ознакомьтесь с нашим предложением.

DIV имеет динамическую ширину. Я хочу сложить текст выше. В настоящее время обертка происходит на границе слова, которая максимизирует длину первой строки:

|-DIV WIDTH------------------------------------|
Hello there, dear customer. Please have a look
at our offer.

Я бы предпочел, чтобы обертка произошла на границе предложения. Однако, если обертывание не требуется, я бы хотел, чтобы строка оставалась одной.

Чтобы проиллюстрировать мою точку зрения, просмотрите различные ширины DIV и как я хочу, чтобы мой текст обернулся:

|-DIV WIDTH--------------------------------------------------------|
Hello there, dear customer. Please have a look at our offer.
|-DIV WIDTH-----------------------------------|
Hello there, dear customer. 
Please have a look at our offer.
|-DIV WIDTH--------|
Hello there, dear 
customer. 
Please have a look
at our offer.

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

magnifi­cently

Есть ли аналогичный метод для намека на перенос слов в HTML?

Ответы

Ответ 2

Не совсем точно, но близко: http://jsfiddle.net/uW4h8/1/.

Вкратце, вы должны установить white-space: nowrap; для текстового контейнера и использовать <wbr> для вставки разрывов между словами по желанию.

Ответ 3

Элементы <wbr> и &nbsp; часто работают, но не всегда. Они особенно проблематичны при разработке статической целевой страницы, которая (а) должна работать на разных экранах и браузерах, и (б) должна выглядеть хорошо.

В этом случае я хочу контролировать намеки на разрывы строк при различных разрешениях экрана. Для этого я использую теги <br> и css. Это может стать беспорядком, если он становится сложным, но я нашел, что он работает до определенной степени. Например:

<p class='break-hints'>
Hello there, dear customer. <br class='break-big'>
Please have a look <br class='break-small'> at our offer.
</p>

Затем я использую CSS с медиа-запросами, чтобы указать, когда должны срабатывать различные разрывы.

p.break-hints br {
  display: none;
}

@media only screen and (max-width: 300px) { 
  p.break-hints br.break-small {
    display: inline;
  }
}

p.break-hints br.break-big {
  display: inline;
}

Ответ 4

Используйте пробел без пробела U + 00A0 (или &nbsp;, если у вас нет удобного способа ввода символа как такового) между словами, когда прерывание строки не допускается, и нормальное пространство в противном случае.

Это не работает, когда слова содержат дефисы "-", а некоторые другие символы, такие как круглые скобки, также могут вызывать проблемы, потому что некоторые браузеры рассматривают их как возможность разрыва строки после них. См. http://www.cs.tut.fi/~jkorpela/html/nobr.html для продолжительного трактата, включая различные методы решения проблем. Но если у вас есть обычные слова с обычной пунктуацией и без дефиса, вы должны быть в порядке с простым подходом.