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

Question

Представьте, что у меня есть длинная строка из нескольких слов в 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?

Answer 1

Использование ­ словами или <wbr>между словами, как<wbr>не будет вводить дефис

Смотрите также:

• QuirksMode:<wbr> список компатов

Answer 2

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

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

Answer 3

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

В этом случае я хочу контролировать подсказки для разрыва строки при различных разрешениях экрана. Для этого я использую <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;
}

Answer 4

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

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

Answer 5

У меня была такая же проблема. У меня был такой текст:

<div>Assistant Something / Anything Pabulum Nautical</div>

Где сломать его после / символ действительно поможет читаемости.

В моем случае я решил это, заключив желаемые фрагменты с более низким приоритетом разрыва строки с помощью встроенного блока (теперь inline flow-root видимо) элементы:

<div><span class="inline">Assistant Something</span> / <span class="inline">Anything Pabulum Nautical</span></div>

См. Фрагмент для результатов.

.d {
  margin: 1em;
}

#b span {
  display: inline-block;
}

<div class="d" id="a">Assistant Something / Anything Pabulum Nautical</div>

<div class="d" id="b"><span>Assistant Something</span> / <span>Anything Pabulum Nautical</span></div>