HTML: Мягкий дефис () без тире?

У меня небольшая проблема с макетом: на клиентском веб-сайте мы показываем контактную информацию людей в маленьком поле. Ширина этого поля ограничена. Бывает, что есть люди с очень длинными именами (в конце концов, это в Германии...), а адрес электронной почты представляет собой конкатенацию имени и фамилии. Результат: с определенными именами адрес электронной почты выходит за рамки ограничений, заданных в поле «О программе».

Вставка ­ перед @ приводит к правильному разрыву строки, но выглядит так:

john.doe-
@example.com

Можно ли подавить этот тире? Я не хочу использовать <br />, потому что для 90% имен доступной ширины более чем достаточно.


html hyphenation soft-hyphen
person Benjamin Wohlwend    schedule 18.02.2011    source источник
comment
word-break: break-all; может вам помочь   -  person Denis    schedule 30.01.2016

Ответы (4)


arrow_upward
7
arrow_downward

Хотя я не уверен, как это работает в разных браузерах (вероятно, довольно хорошо), вы всегда можете использовать символ тонкого пробела (&thinsp;) или пробел нулевой ширины (&#8203;).+ +

john.doe&thinsp;@example.com

++ Я бы не советовал использовать пробел нулевой ширины, так как, по-видимому, некоторые браузеры не будут отображать его правильно (источник).

person Community    schedule 18.02.2011
comment
Мне было бы интересно увидеть современный браузер, который не отображает это должным образом. На связанной странице есть информация о двух отслеживаемых ошибках, обе из которых были устранены как исправленные. - person Sapph; 18.02.2011
comment
Если вы скопируете и вставите это письмо из браузера в Outlook, блокнот и т. д., вы получите [email protected] - person joshcomley; 18.02.2011
comment
@joshcomley Я только что попробовал это с примерами из скрипки в моем посте, и у меня не было такой проблемы. - person Sapph; 18.02.2011
comment
Сапф прав, его ответ дает правильный результат копирования/вставки, в то время как тонкое пространство @D_N заканчивается пробелом вместо Я знаю, что это не нужно OP (возможно), но для других, которые ищут решение этой проблемы, я думаю, что это важно упомянуть об этом здесь. - person Shiv Kumar; 18.02.2011
comment
@Sapph, я бы тоже был, но хотел быть осторожным там, где не был уверен. (Хотя на ум приходит Opera Mini. Говорю как страдающий пользователь Blackberry.) - person ; 18.02.2011
comment
@ Шив Кумар Я попробовал Outlook и Блокнот, у которых был правильный вывод, но я получил? в Notepad++, так что это может сильно зависеть от того, куда вы пытаетесь вставить что-то. :) - person Sapph; 18.02.2011
comment
@Shiv Kumar, в моем тесте у меня не было видимого символа для пробела нулевой ширины, но, как и ожидалось, этот символ действительно перешел в пасту (воспринимаемый как пятно в адрес электронной почты, который нужно пройти двумя стрелками влево или вправо). Я понятия не имею, будет ли это проблемой для почтовых серверов, но я думаю, что в любом случае это одна и та же проблема. Я бы не рекомендовал это для копирования/вставки простого текста. - person ; 18.02.2011
comment
Я фактически скопировал и вставил свой пример со скрипки! Так что я не уверен, как это происходит. Пробовал в Chrome, FF и IE. Я не уверен, как получить его без появления ?. См. jsfiddle.net/YEyFy/6 для примеров (я вставлял в блокнот) - person joshcomley; 18.02.2011
comment
@D_N, хороший улов в тесте со стрелкой влево / вправо. Определенно стоит иметь в виду. +1 к этому комментарию! - person Sapph; 18.02.2011
comment
У серверов @D_N, очевидно, не будет проблем, поскольку это чисто презентационное. Однако, если кто-то копирует/вставляет при попытке отправить электронное письмо, то это не сработает. - person Shiv Kumar; 18.02.2011
comment
@Sapph, я пробовал в Outlook и блокноте, а не в Notepad++. Возможно, блокнот ++ видит визуальный crlf как какой-то символ? - person Shiv Kumar; 18.02.2011
comment
@ Шив Кумар, я имел в виду, что не знаю, что произойдет, когда вы скопируете / вставите это в Outlook и отправите электронное письмо. (Почтовые серверы могут быть умными, и эти символы, вероятно, недействительны.) Но это та же проблема, которая может возникнуть с любым таким символом, будь то &shy;, &thinsp; или &#8203;. - person ; 18.02.2011
comment
Персонаж есть персонаж, каким бы маленьким он ни был. :) - person ; 18.02.2011
comment
Спасибо за все ваши ответы и комментарии. Я пришел к выводу, что, к сожалению, удовлетворительного технического решения не существует. И &#8203;, и &thinsp; вводят ложные символы при копировании и вставке (это то, что люди обычно делают с адресами электронной почты). Я предлагаю клиенту, чтобы несколько человек с такими гигантскими адресами электронной почты получили более короткий псевдоним для использования на веб-сайте. - person Benjamin Wohlwend; 18.02.2011
comment
Ах, так это для простого копирования и вставки текста больше, чем для отображения? Я рад, что мы углубились в детали тогда. Я предполагал, что это в основном для отображения, и что большинство пользователей будут нажимать на ссылку, где адрес mailto в любом случае не понадобится. Это оставило бы внешний случай, когда кто-то 1) не щелкал ссылку (только) по 2) длинным именам. Вы также можете создать кнопку «скопировать этот адрес электронной почты», чтобы обойти эту ситуацию (требуется javascript + Flash [davidwalsh.name/clipboard ]). Просто выбрасываю его туда. - person ; 19.02.2011
comment
@D_N: отображаемое электронное письмо встроено в ссылку <a href="mailto:">, поэтому у людей, нажимающих на эту ссылку, не возникнет проблем. Но я предполагаю, что процент людей, которые просто выбирают и копируют и вставляют электронную почту, больше нуля. - person Benjamin Wohlwend; 21.02.2011

arrow_upward
4
arrow_downward

Используйте пробел нулевой ширины: &#8203;

john.doe&#8203;@example.com

В действии здесь: http://jsfiddle.net/uTXwx/1/

person Sapph    schedule 18.02.2011

arrow_upward
1
arrow_downward

Возможно, вы захотите взглянуть на свойство css word-wrap.

И эта страница, похоже, делает то, что вам нужно.

person Jan Zyka    schedule 18.02.2011

arrow_upward
0
arrow_downward

Если вы хотите отказаться от поддержки Internet Explorer 11, вы можете использовать элемент <wbr>. Это, вероятно, лучше, чем использование пространства с нулевой шириной, потому что оно не будет скопировано в буфер обмена.

Посмотрите здесь

документация MDN

person jlh    schedule 15.11.2019