Мягкий дефис в HTML (<wbr> против & shy;)

Question

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

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

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

---

См. Соответствующее обсуждение SO здесь .

Answer 1

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

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

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

Answer 2

Итог за февраль 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 - confumbabbl & shy; ication & shy; ism
  • ............................................... .................................................. ............. confumbabbl и застенчивый; ication и застенчивый; изм
  • ............................................... .................................................. ................. confumbabbl и застенчивый; ication и застенчивый; изм

<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: ­ не удается, ­ успешно
• Bing: ­ не удается, ­ не удается
• Baidu: ­ терпит неудачу, ­ терпит неудачу (может сопоставлять фрагменты в более длинных строках, но не слова самостоятельно содержащие ­ или ­)
• Яндекс: ­ не удалось, ­ успешно (хотя возможно, что он соответствует фрагменту строки, как Baidu, не уверен на 100%)

Найти на странице в браузерах

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

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

Answer 3

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

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

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

Hyphenator:

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

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

Answer 4

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

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

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

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

Answer 5

Очень важно отметить, что с 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.

Answer 6

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

​

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

⁠

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

Answer 7

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

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

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

Answer 8

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

Answer 9

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

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

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

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

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

Answer 10

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