Мягкий дефис в HTML ( vs. & shy;)

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

В соответствии с комментариями эта страница  - это нестандартный суп-тег, изобретенный Netscape. Похоже, что  имеет свои проблемы со стандартным соответствием, а также. Кажется, что не имеет возможности получить рабочее решение для всех браузеров.

Каков ваш способ обработки мягких дефис и почему вы его выбрали? Есть ли предпочтительное решение или передовая практика?

См. Соответствующую дискуссию SO < здесь.

Ответ 1

~~К сожалению, поддержка &shy настолько несовместима между браузерами, что ее нельзя реально использовать.~~

QuirksMode прав - нет хорошего способа использовать мягкие дефисы в HTML прямо сейчас. Посмотрите, что вы можете сделать, чтобы пойти без них.

2013 edit: Согласно QuirksMode,  теперь работает/поддерживается во всех основных браузерах.

Ответ 2

Итоги за февраль 2015 года (частично обновлено в ноябре 2017 года)

Все они работают довольно хорошо,  ограничивает это, поскольку Google все еще может индексировать слова, содержащие это.

В браузерах:  и  оба отображаются, как и ожидалось, в основных браузерах (даже в старых IE!).  не поддерживается в последних версиях IE (10 или 11) и не работает должным образом в Edge.
При копировании и вставке из браузеров: (протестировано в 2015 году), как ожидается для  и  для Chrome и Firefox на Mac, в Windows (10) он сохраняет символы и вставляет жесткие дефисы в Блокнот, а невидимые мягкие дефисы - в приложения, которые их поддерживают. IE (win7) всегда вставляется с дефисами, даже в IE10, а Safari (Mac) копирует таким образом, что в некоторых приложениях (например, MS Word) вставляется как дефис, но не в других
Найти на странице работы для  и  во всех браузерах, кроме IE, который совпадает только с точными копиями и вставками (даже до IE11)
Поисковые системы: Google соответствует словам, содержащим  со словами, набранными нормально. По состоянию на 2017 год оно больше не соответствует словам, содержащим  , Яндекс должен быть таким же. Бинг и Байду, похоже, тоже не совпадают.

Попробуй это

Для актуального живого тестирования, вот несколько примеров уникальных слов с мягкими дефисами.

 - confumbabblicationism конфуцизм
- .............................................................................................................. confumbabblicationism
- .................................................................................................................. confumbabblicationism

 - donfounbabblicationism. Этот сайт удаляет  из вывода. Вот фрагмент jsbin.com для тестирования.

 - eonfulbabblicationism - eonfulbabblicationism
- ................................................................................................................. eonfulbabblicationism
- .................................................................................................................... eonfulbabblicationism

Здесь они без каких-либо застенчивых дефисов (это для копирования и вставки в тестирование поиска на странице; написано так, чтобы не нарушать тесты поисковой системы):

ZZZconfumbabblicationismZZZdonfounbabblicationismZZZeonfulbabblicationismZZZ

Отображать через браузеры

Успех: отображается как обычное слово, кроме случаев, когда оно должно разрываться, когда оно разрывается и переносится в указанном месте.

Отказ: отображение необычно или не удается сломать в предусмотренном месте.

Chrome (40.0.2214.115, Mac):  успех,  успех,  успех
Firefox (35.0.1, Mac):  успех,  успех,  успех
Safari (6.1.2, Mac):  успех,  не проверен,  успех
Edge (Windows 10):  success,  fail (перерыв, но без дефиса),  успех
IE11 (Windows 10):  успех,  сбой (без перерыва),  успех
IE10 (Windows 10):  успех,  сбой (без перерыва),  успех
IE8 (Windows 7): ошибочно - иногда, ни один из них не работает вообще, и все они просто следуют за css word-wrap. Иногда они кажутся всем работающими. Пока не найдено четкой закономерности относительно того, почему.
IE7 (Windows 7):  успех,  успех,  успех

Скопируйте и вставьте в браузеры

Успех: копирование и вставка всего слова, без черты. (протестировано на вставке Mac в поиск в браузере, MS Word 2011 и Sublime Text)

Ошибка: вставка с дефисом, пробелом, переводом строки или с символами барахла.

Chrome (40.0.2214.115, Mac):  успех,  успех,  успех
Firefox (35.0.1, Mac):  успех,  успех,  успех
Safari (6.1.2, Mac):  сбой в MS Word (вставляет все как дефисы), успех в других приложениях  fail,  сбой в MS Word (вставляет все как дефисы), успех в других приложениях
IE10 (Win7):  fail вставляет все как дефисы,  fail,  неудача вставляет все как дефисы
IE8 (Win7):  fail вставляет все как дефисы,  fail,  неудача вставляет все как дефисы
IE7 (Win7):  fail вставляет все как дефисы,  fail,  неудача вставляет все как дефисы

Поисковая система соответствия

Обновлено в ноябре 2017 года.  не тестировалось, поскольку StackOverflow CMS удалило его.

Успех: поиск по всему слову без дефиса находит эту страницу.

Ошибка: поисковые системы находят эту страницу только при поиске сломанных сегментов слов или слова с дефисами.

Google:  не удалось  преуспевает
Bing:  не удалось  терпит неудачу
Baidu:  не удалось  терпит неудачу (может соответствовать фрагментам в более длинных строках, но не словам самостоятельно, содержащим  или )
Яндекс:  не удалось  успешно (хотя возможно, что он соответствует фрагменту строки, как Baidu, не уверен на 100%)

Найти на странице через браузеры

Успех и неудача как поиск в поисковых системах.

Chrome (40.0.2214.115, Mac):  успех,  успех,  успех
Firefox (35.0.1, Mac):  успех,  успех,  успех
Safari (6.1.2, Mac):  успех,  успех,  успех
IE10 (Win7):  совпадения fail только тогда, когда оба содержат застенчивые дефисы,  success,  сбой только совпадения, когда оба содержат застенчивые дефисы
IE8 (Win7):  совпадения fail только тогда, когда оба содержат застенчивые дефисы,  success,  сбой только совпадения, когда оба содержат застенчивые дефисы
IE7 (Win7):  совпадения fail только тогда, когда оба содержат застенчивые дефисы,  success,  сбой только совпадения, когда оба содержат застенчивые дефисы

Ответ 3

Продолжается работа над стандартизировать перенос в CSS3.

Некоторые современные браузеры, особенно Safari и Firefox, уже поддерживают это. Вот хорошая и актуальная .

Как только перенос CSS будет реализован повсеместно, это было бы лучшим решением. Тем временем я могу порекомендовать Hyphenator - JS script, в котором описывается, как переносить текст таким образом, который наиболее подходит для конкретный браузер.

Hyphenator:

полагается на алгоритм переноса переносов Franklin M. Liangs, широко известный из LaTeX и OpenOffice.
использует перенос CSS3, где он доступен,
автоматически вставляет  в большинстве других браузеров,
поддерживает несколько языков,
имеет высокую степень конфигурирования,
изящно возвращается в случае, если javascript не включен.

Я использовал его, и он отлично работает!

Ответ 4

Я использую , вставленный вручную, если необходимо.

Мне всегда жаль, что люди не используют методы, потому что есть какой-то, может быть, старый или странный браузер, который не обрабатывает их так, как они были указаны. Я обнаружил, что  работает правильно как в последних браузерах Internet Explorer, так и в Firefox, этого должно быть достаточно. Вы можете включить проверку браузера, в которой люди говорят о том, чтобы использовать что-то зрелое или продолжать на свой страх и риск, если они приходят с каким-то странным браузером.

Syllabification не так просто и Я не могу порекомендовать оставить его на Javascript. Его специфическая для языка тема и, возможно, ее нужно тщательно пересмотреть столяром, если вы не хотите, чтобы она раздражала ваш текст. Некоторые языки, такие как немецкий, образуют сложные слова и, вероятно, приводят к проблемам с разложением. Например. Spargelder (зародыш, сэкономленные деньги, пл.) по правилам силлабификации могут быть обернуты в два места (Spar-gel-der). Однако, обертывая его во втором положении, первая часть появляется в виде Spargel- (зародышевая спаржа), активируя полностью вводящую в заблуждение концепцию в голове читателя и, следовательно, избегая ее.

А как насчет строки Wachstube? Это может означать "охрана" (Wach-stu-be) или "трубка воска" (Wachs-tu-be). Возможно, вы найдете другие примеры и на других языках. Вы должны стремиться обеспечить среду, в которой настольный рабочий может поддерживаться при создании хорошо слогового текста, проверяя каждое критическое слово.

Ответ 5

Очень важно заметить, что с HTML5  и  не должны делать то же самое!

Мягкие дефисы

 - мягкий дефис, то есть U + 00AD: SOFT HYPHEN. Например,

innehålls&shy;förteckning

может отображаться как

innehållsförteckning

или

innehålls-
förteckning

На сегодняшний день в Firefox, Chrome и Internet Explorer работают мягкие дефисы.

Элемент wbr

Элемент wbr - это функция прерывания слова, которая не отображает дефис, если происходит разрыв строки. Например,

ABCDEFG<wbr/>abcdefg

может отображаться как

ABCDEFGabcdefg

или

ABCDEFG
abcdefg

На сегодняшний день этот элемент работает в Firefox и Chrome.

Ответ 6

Объект no-width space может использоваться вместо тэга  надежно на практически каждой платформе.

&#8203;

Также полезен word joiner, который может использоваться для запрета перерыва. (Вставьте между каждым символом слова, кроме того, где вы хотите разбить.)

&#8288;

С двумя из них вы можете сделать что угодно.

Ответ 7

Это решение для кроссбраузеров, которое я смотрел на некоторое время назад, которое выполняется на клиенте и использует jQuery:

(function($) { 
  $.fn.breakWords = function() { 
    this.each(function() { 
      if(this.nodeType !== 1) { return; } 

      if(this.currentStyle && typeof this.currentStyle.wordBreak === 'string') { 
        //Lazy Function Definition Pattern, Peter Blog 
        //From http://peter.michaux.ca/article/3556 
        this.runtimeStyle.wordBreak = 'break-all'; 
      } 
      else if(document.createTreeWalker) { 

        //Faster Trim in Javascript, Flagrant Badassery 
        //http://blog.stevenlevithan.com/archives/faster-trim-javascript 

        var trim = function(str) { 
          str = str.replace(/^\s\s*/, ''); 
          var ws = /\s/, 
          i = str.length; 
          while (ws.test(str.charAt(--i))); 
          return str.slice(0, i + 1); 
        }; 

        //Lazy Function Definition Pattern, Peter Blog 
        //From http://peter.michaux.ca/article/3556 

        //For Opera, Safari, and Firefox 
        var dWalker = document.createTreeWalker(this, NodeFilter.SHOW_TEXT, null, false); 
        var node,s,c = String.fromCharCode('8203'); 
        while (dWalker.nextNode()) { 
          node = dWalker.currentNode; 
          //we need to trim String otherwise Firefox will display 
          //incorect text-indent with space characters 
          s = trim( node.nodeValue ).split('').join(c); 
          node.nodeValue = s; 
        } 
      } 
    }); 

    return this; 
  }; 
})(jQuery);

Ответ 8

Я предлагаю использовать wbr, поэтому код можно записать следующим образом:

<p>这里有一段很长，很长的<wbr
></wbr>文字；这里有一段</p>

Это не приведет к пробелу между charaters, а  не остановит пробелы, созданные разрывами строк.

Ответ 9

Я использовал мягкий дескриптор unicode успешно в нескольких настольных и мобильных браузерах для решения проблемы.

Символ unicode \u00AD и довольно легко вставить в строку юникода Python, например s = u'Языки и методы програм\u00ADми\u00ADро\u00ADва\u00ADния'.

Другим решением является вставка самого юникода char, а исходная строка будет выглядеть совершенно обычным в таких редакторах, как Sublime Text, Kate, Geany и т.д. (курсор будет ощущать невидимый символ, хотя).

Hex-редакторы собственных инструментов могут легко автоматизировать эту задачу.

Легкий kludge - использовать редкий и видимый символ, например ¦, который легко скопировать и вставить, и заменить его на мягкий дефис, используя, например, frontend script в $(document).ready(...). Исходный код, например s = u'Языки и методы про¦гра¦м¦ми¦ро¦ва¦ния'.replace('¦', u'\u00AD'), легче читать, чем s = u'Языки и методы про\u00ADг\u00ADра\u00ADм\u00ADми\u00ADро\u00ADва\u00ADния'.

Ответ 10

Иногда веб-браузеры кажутся более прощающими, если вы используете строку Unicode , а не объект .

Ответ 11

Если вам не повезло и все еще нужно использовать JSF 1, то единственным решением является использование & # 173;, & shy; не работает.

Ответ 12

и & shy;

Сегодня вы можете использовать оба.

 используйте, чтобы сломать и не ставить больше информации.

Пример, используйте, чтобы показать ссылки:

 https://stackoverflow.com/info/226464/soft-hyphen-in-html-wbr-vs-shy

&застенчивый; когда это необходимо, в этот момент текст обрывается и добавляется дефис.

Пример:

"Я имеешь позу, я тебя люблю", "я тебя люблю", "я тебя люблю", "я тебя люблю", я тебя люблю ".

div{
  max-width: 130px;
  border-width: 2px;
  border-style: dashed;
  border-color: #f00;
  padding: 10px;
}

<div>https://<wbr>stackoverflow.com<wbr>/info/226464<wbr>/soft-hyphen-in-<wbr>html-wbr-vs-shy</div>

<div>É im&shy;pos&shy;sí&shy;vel pa&shy;ra um ho&shy;mem a&shy;pren&shy;der a&shy;qui&shy;lo que ele acha que já sa&shy;be.</div>

Мягкий дефис в HTML (<wbr> vs. & shy;)