Як ви вирішите проблему з м'якими дефісами на своїх веб-сторінках? У тексті можуть бути довгі слова, які, можливо, вам захочеться перервати рядком із дефісом. Але ви не хочете, щоб дефіс показував, чи все слово знаходиться в одному рядку.

Відповідно до коментарів на цій сторінці <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- конфумбаблікалізм
  • .................................................. .................................................. .......... конфумбаблікалізм
  • .................................................. .................................................. .............. конфумбаблікалізм

<wbr>- donfounbabbl<wbr>ication<wbr>ism. Цей сайт видаляється <wbr/>з результатів. Ось фрагмент jsbin.com для тестування .

• ­- eonfulbabbl­ication­ism- eonfulbabblicationism
  • .................................................. .................................................. ............. еонфульбаблікалізм
  • .................................................. .................................................. ................ eonfulbabblicationism

Ось вони без сором’язливих дефісів (це для копіювання та вставлення в тестування на сторінці; написано таким чином, що не порушує тести пошукової системи):

ZZZconfumbabblicationismZZZdonfounbabblicationismZZZeonfulbabblicationismZZZ

Відображати в браузерах

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

Збій: незвично відображається або не вдалося зламати в призначеному місці.

• Chrome (40.0.2214.115, Mac): ­успіх, <wbr>успіх, ­успіх
• Firefox (35.0.1, Mac): ­успіх, <wbr>успіх, ­успіх
• Safari (6.1.2, Mac): ­успіх, ще <wbr> не перевірений , ­успіх
• Край (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): ­ помилка вставляє всі як дефіси, <wbr> помилка , ­ помилка вставляє всі як дефіси
• IE8 (Win7): ­ помилка вставляє всі як дефіси, <wbr> помилка , ­ помилка вставляє всі як дефіси
• IE7 (Win7): ­ помилка вставляє всі як дефіси, <wbr> помилка , ­ помилка вставляє всі як дефіси

Збіг пошукової системи

Оновлено в листопаді 2017 року, <wbr>не перевірено, оскільки CMS StackOverflow викреслив його.

Успіх: пошук у всьому слові без дефісів знайдіть цю сторінку.

Невдача: пошукові системи знаходять цю сторінку лише під час пошуку зламаних відрізків слів або слова з дефісами.

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

Знайдіть на сторінці в веб-переглядачах

Успіх і невдача як відповідність пошукових систем.

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

Постійні зусилля щодо стандартизації переносу в CSS3 .

Деякі сучасні браузери, зокрема Safari та Firefox, вже підтримують це. Ось хороша та сучасна довідка про підтримку браузера .

Після того, як переноси CSS будуть впроваджені універсально, це було б найкращим рішенням. Тим часом я можу порекомендувати Hyphenator - сценарій JS, який визначає, як прошивати текст так, як найбільш підходить для певного браузера.

Іфінатор:

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

Я його використав, і він чудово працює!

Я використовую ­, вставляю вручну, де потрібно.

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

Навчання не є таким простим, і я не можу рекомендувати залишити його на якомусь JavaScript . Це тематика, що відповідає мові, і, можливо, її потрібно ретельно переглядати працівник, якщо ви не хочете, щоб ваш текст дратував текст. Деякі мови, такі як німецька, утворюють складні слова і, ймовірно, можуть призвести до проблем розкладання. Наприклад Spargelder( герм. Заощаджені гроші, пл.), За правилами конспектування, можна загорнути в два місця ( Spar-gel-der). Однак, загорнувши його у друге положення, перетворює першу частину на показ Spargel-( зародок спаржі), активізуючи цілком оманливу концепцію в голові читача, і тому слід уникати її.

А як щодо струни 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 є \u00ADі досить легко вставити в рядок типу Unicode Python s = u'Языки и методы програм\u00ADми\u00ADро\u00ADва\u00ADния'.

Іншим рішенням є вставка самого символу unicode, і вихідний рядок буде виглядати цілком звичайним у таких редакторах, як Sublime Text, Kate, Geany тощо (курсор відчує непомітний символ).

Шестигранні редактори внутрішніх інструментів можуть легко автоматизувати це завдання.

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

Іноді веб-браузери здаються більш простими, якщо ви використовуєте рядок Unicode, ­а не ­сутність.

Якщо вам не пощастило і вам все-таки доводиться використовувати JSF 1, єдине рішення - використовувати & # 173 ;, & shy; не працює.

<wbr> і & сором'язливий;

Сьогодні ви можете використовувати і те, і інше.

<wbr> використовуйте для перерви та не вводите більше інформації.

Приклад: використовувати для показу посилань:

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