Дискреционный разрыв строки в HTML?

Я ищу способ указать, где строка должна разорваться если она не может поместиться на своей строке аналогично ­ (мягкий / дискреционный дефис), но с пространство. Я пробовал поискать в Google, но не получил много подходящих результатов (в основном для InDesign, несмотря на указание «html»), и что я действительно получил, так это то, что несколько человек сказали, что не знают способа.

Ex.

Здравствуйте, меня
зовут foo.
vs.
Здравствуйте,
меня зовут foo.
но если место доступно:
Здравствуйте, меня зовут foo.

Для конкретности я не имею в виду white-space: normal/nowrap/pre/… и не хочу форсировать разрыв, как в случае с <br />.

Я использую AngularJS, поэтому большая часть всего обрабатывается через JavaScript, поэтому, если есть простой / эффективный / умный способ сделать это с помощью этого, я был бы открыт для него.


html control-characters
person Jakob Jingleheimer    schedule 02.01.2013    source источник
comment
Возможная помощь: stackoverflow.com/ questions / 226464 /   -  person sgeddes    schedule 03.01.2013
comment
Я тоже не знаю разумного пути к этому. Безумным способом было бы использовать &nbsp; для каждого пробела кроме того, которое вы хотите разбить, но это испортит весь текст. Если это всего лишь часть hello, это может сработать.   -  person toniedzwiedz    schedule 03.01.2013
comment
А как насчет невидимого &shy;?   -  person SLaks    schedule 03.01.2013
comment
@SLaks, может, и все. Я думаю: Hello, &shy;my name is foo.. Интересно, что с этим будут делать браузеры. Протестирую и отчитаюсь. Благодарность!   -  person Jakob Jingleheimer    schedule 03.01.2013
comment
@SLaks действительно не работает :(   -  person Jakob Jingleheimer    schedule 04.01.2013

Ответы (4)


arrow_upward
13
arrow_downward

Чтобы указать, где между словами не должен появляться разрыв строки, используйте ПРОБЕЛ БЕЗ РАЗРЫВА или знак "" между словами. Любое нормальное пространство можно разбить. Итак, вы можете написать, например,

Hello,&nbsp;my&nbsp;name is&nbsp;foo.

Если вы предпочитаете указать разрешенные разрывы (согласно вашему комментарию ниже), вы можете обернуть текст внутри элемента nobr (нестандартный, но работает как шарм) или внутри любого элемента, для которого вы установили white-space: nowrap, тем самым запрещая разрывы строк, кроме случаев, когда явно принудительно или разрешено. Затем вы должны использовать тег <wbr> (нестандартный, но ...) или ссылку на символ &#8203; или &#x200b; (для Ice ZERO WIDTH SPACE) после пробела, чтобы разрешить разрыв строки, например

<nobr>Hello, <wbr>my name <wbr>is foo.</nobr>

Выбор между <wbr> и ZERO WIDTH SPACE - это сложный вопрос, в основном из-за странностей IE.

person Jukka K. Korpela    schedule 02.01.2013
comment
Например, я бы сделал что-то вроде: Hello,&dbr;my name is foo. (где &dbr; - произвольный разрыв строки, но, насколько мне известно, &dbr; не настоящий). - person Jakob Jingleheimer; 03.01.2013
comment
@jacob, только не используйте выдуманные сущности. В чем проблема? - person Jukka K. Korpela; 03.01.2013
comment
Я хочу указать, где именно должен происходить разрыв строки, ЕСЛИ требуется разрыв строки. Я бы действительно предпочел использовать один символ, чтобы указать, где он должен произойти, вместо того, чтобы использовать кучу символов, чтобы указывать везде, где он не должен. - person Jakob Jingleheimer; 04.01.2013
comment
@jacob, я добавил альтернативный ответ, который работает в этом направлении, но я думаю, что более логично и надежнее использовать пробелы вместо неразрывных пробелов (поддерживается повсеместно). Но если текст содержит дефисы, тогда может быть лучше другой подход (поскольку некоторые браузеры рассматривают дефисы как допускающие разрыв строки после них по умолчанию). - person Jukka K. Korpela; 04.01.2013
comment
Это звучало так многообещающе; увы, не сработало :( jsfiddle.net/jshado1/2agtK - person Jakob Jingleheimer; 04.01.2013
comment
Похоже, браузеры в значительной степени отказались от поддержки wbr и пробелов нулевой ширины внутри nobr (Chrome по-прежнему уважает wbr внутри nobr). Я думаю, это ставит нас на первое место: разделите текст на неразрывные сегменты. - person Jukka K. Korpela; 04.01.2013
comment
Фу; как это игнорировать html / css :( - person Jakob Jingleheimer; 05.01.2013
comment
wbr действительно работает внутри тега nobr, вы просто не можете определить ширину в теге nobr, вы должны определить его в теге оболочки: jsfiddle.net/sxc6h7jn - person Skeets; 06.08.2019

arrow_upward
12
arrow_downward

Вы можете использовать тег <wbr>.

РЕДАКТИРОВАТЬ: Как упоминалось в комментариях, вы можете использовать пространство нулевой ширины: &#8203; ( См. Также: Что противоположно nbsp?)

person chrisbulmer    schedule 02.01.2013
comment
Только для HTML5. Также попробуйте найти ресурсы кроме w3schools: D - person ; 03.01.2013
comment
wbr предназначен для взлома в пределах на слово. OP хочет помочь браузеру разорвать набор слов. - person Joseph Silber; 03.01.2013
comment
@pst - IE поддерживает wbr с версии 5.5 - person Joseph Silber; 03.01.2013
comment
@pst - Не могу больше договориться о держаться к черту подальше от w3schools. - person Joseph Silber; 03.01.2013
comment
Вот дерьмо, я этого не осознавал. Взгляните на stackoverflow.com/questions/ 2046530 / затем - person chrisbulmer; 03.01.2013
comment
Ссылка на w3chools - чушь, но использование wbr - практическое решение. - person Jukka K. Korpela; 03.01.2013

arrow_upward
2
arrow_downward

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

var str = "Hello,<br>My name is foo.";

str = str.replace(/ /g, '&nbsp;').replace(/<br>/g, ' ');

Как правило, используйте неразрывный пробел для разделения слов, которые вы не хотите прерывать.

Посмотрите здесь в действии: http://jsfiddle.net/5xmt6/ (измените размер окна, чтобы увидеть, как реагирует).

Примечание. это очень хакерский метод и создает свой собственный набор проблем; а именно: если область просмотра становится чрезвычайно узкой, остальной текст не переносится.

person Joseph Silber    schedule 02.01.2013
comment
Это умно, но какой бы беспорядок это ни принесет, ха-ха. спасибо за идею! - person Jakob Jingleheimer; 03.01.2013

arrow_upward
1
arrow_downward

Вот метод, который все еще работает: разбейте текст на группы, используя интервалы inline-block.

https://jsfiddle.net/mindplay/7aeyp3hs/

пример

Обратите внимание, что я использую правило @media, чтобы отключить этот эффект на очень маленьких устройствах, где текст будет течь, как обычно.

person mindplay.dk    schedule 18.03.2020