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

Согласно комментариям на этой странице <wbr> есть нестандартный «суп-пэг, изобретенный Netscape». Похоже, ­ есть свои проблемы с соответствием стандартам . Кажется, нет никакого способа получить работающее решение для всех браузеров .

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

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

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

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

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

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

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

Попробуй это

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

• ­- confumbabbl­ication­ism- конфумбаблизм
  • .................................................. .................................................. .......... confumbabblicationism
  • .................................................. .................................................. .............. confumbabblicationism

<wbr>- donfounbabbl<wbr>ication<wbr>ism. Этот сайт удаляется <wbr/>из вывода. Вот фрагмент jsbin.com для тестирования .

• ­- eonfulbabbl­ication­ism- eonfulbabblicationism
  • .................................................. .................................................. ............. eonfulbabblicationism
  • .................................................. .................................................. ................ eonfulbabblicationism

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

ZZZconfumbabblicationismZZZdonfounbabblicationismZZZeonfulbabblicationismZZZ

Отображение в разных браузерах

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

Сбой: отображение необычно или не удалось сломать в предусмотренном месте.

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

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

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

Ошибка: вставка с дефисом, пробелом, разрывом строки или с символами нежелательной почты.

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

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

Обновлено в ноябре 2017 года. <wbr>Не тестировалось, потому что CMS StackOverflow удалил его.

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

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

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

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

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

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

В настоящее время предпринимаются усилия по стандартизации переносов в CSS3 .

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

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

Hyphenator:

• использует алгоритм переноса слов Франклина М. Лианга , широко известный из LaTeX и OpenOffice.
• использует переносы CSS3 там, где это возможно,
• автоматически вставляется ­в большинство других браузеров,
• поддерживает несколько языков,
• легко настраивается,
• изящно отступает в случае, если JavaScript не включен.

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

Я использую ­, вставляется вручную, где это необходимо.

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

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

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

Очень важно заметить, что, начиная с HTML5, <wbr>и ­ не предполагается делать то же самое !

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

­мягкий дефис, то есть U + 00AD: МЯГКИЙ ГИФЕН. Например,

innehålls­förteckning

может быть представлен как

innehållsförteckning

или как

innehålls-
förteckning

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

wbrэлемент

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

ABCDEFG<wbr/>abcdefg

может быть представлен как

ABCDEFGabcdefg

или как

ABCDEFG
abcdefg

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

Пространство нулевой ширины объект может быть использован вместо <wbr>тега надежно практически на любой платформе.

​

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

⁠

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

Это кросс-браузерное решение, которое я недавно рассматривал и которое работает на клиенте и использует 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's 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's 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); 

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

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

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

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

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

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

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

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

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

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

<wbr> и & shy;

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

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

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

 https://stackoverflow.com/questions/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>/questions/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>