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

Question

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

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

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

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

Смотрите связанные ТАК обсуждения здесь.

179

html text soft-hyphen wbr

Источник

user5392 22 окт '08 в 16:00

13 ответов

Решение

Итоги за февраль 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):  успех,  потерпеть неудачу (сломать, но без дефиса),  успех
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 (вставляет все как дефисы), успех в других приложениях  потерпеть неудачу,  сбой в MS Word (вставляет все как дефисы), успех в других приложениях
IE10 (Win7):  неудача вставляет все как дефисы,  потерпеть неудачу,  неудача вставляет все как дефисы
IE8 (Win7):  неудача вставляет все как дефисы,  потерпеть неудачу,  неудача вставляет все как дефисы
IE7 (Win7):  неудача вставляет все как дефисы,  потерпеть неудачу,  неудача вставляет все как дефисы

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

Обновлено в ноябре 2017 года.  не проверен, потому что CMS Stackru удалил это.

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

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

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

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

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

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

86

Источник

user568458 23 фев '15 в 11:15

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

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

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

Hyphenator:

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

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

34

Источник

user202974 10 фев '13 в 12:56

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

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

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

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

22

Источник

user1503237 15 фев '13 в 09:16

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

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

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

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.

20

Источник

user282848 18 апр '15 в 17:28

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

&#8203;

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

&#8288;

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

5

Источник

user5414475 06 окт '15 в 14:52

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

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

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

2

Источник

user1257916 15 янв '16 в 22:56

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

Символ Юникода \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ния',

2

Источник

user774971 11 май '14 в 05:51

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

2

Источник

user252895 19 янв '10 в 05:28

и & shy;

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

используйте для прерывания и не помещайте дополнительную информацию.

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

 https://stackru.com/questions/226464/soft-hyphen-in-html-wbr-vs-shy

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

Пример:

"É 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{
  max-width: 130px;
  border-width: 2px;
  border-style: dashed;
  border-color: #f00;
  padding: 10px;
}

<div>https://<wbr>stackru.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>

0

Источник

user5273803 01 июл '19 в 16:51

Будь проще. Мягкий дефис — это просто символ. Как А или Б или . Вам не нужен специальный символ, чтобы включить его, вы можете просто ввести его (если ваш компьютер настроен на это) или скопировать/вставить его из другого места. Как здесь: Мягкий перенос в проводнике юникода

Конечно, персонаж, который вы должны скопировать, невидим, так что, я думаю, это немного усложняет :) Но это все еще работает. Щелкните правой кнопкой мыши и скопируйте.

Вам также не нужно отображать текст, содержащий мягкий дефис, каким-либо особым образом (например, «DangerouslySetInnerHTML» с React). Это просто персонаж; он работает так, как должен, во всех соответствующих браузерах, достойных любого количества соли.

В качестве примера в следующем абзаце я напишу фразу «очень длинное слово с мягкими дефисами вместо пробелов, которое должно занимать не менее двух строк текста, независимо от того, насколько велик ваш экран». Только я добавлю мягкие дефисы вместо пробелов. Вот оно:

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

-1

Источник

user3278654 15 июн '22 в 12:18

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

-1

Источник

user589525 30 дек '14 в 07:29

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

-1

Источник

user3334719 20 фев '14 в 21:33

Другие вопросы по тегам html text soft-hyphen wbr

user30480 22 окт '08 в 19:49 2008-10-22 19:49 · Accepted Answer · 2008-10-22 19:49

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

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

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

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

13 ответов

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

Попробуй это

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

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

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

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

и & shy;