Как использовать ­ и свойство «дефис» CSS?

Question

Я использую hyphens свойство CSS: https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens Mozillas документация говорит:

Предлагаемые возможности разрыва строки, так как покрыты Предлагать возможности линии разрыва, должны быть предпочтительнее автоматического выбора точки останова, когда это возможно.

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

Но у меня есть этот код:

.box { 
 
    width: 130px; 
 
    border: 1px solid red; 
 
    margin-bottom: 5px; 
 
} 
 
.box > a { 
 
    text-transform: uppercase; 
 
    font-size: 12px; 
 

 
    -moz-hyphens: auto; 
 
    -webkit-hyphens: auto; 
 
    -ms-hyphens: auto; 
 
    hyphens: auto; 
 
}

<div class="box"> 
 
    <a href="" lang="en">subdermat&shy;oglyphic</a> 
 
</div> 
 
<div class="box"> 
 
    <a href="" lang="en">subdermatoglyphic</a> 
 
</div>

Теперь я бы предположить, разрывы слов после того, как "subdermat". Но это не так. Он ломается после «субдермато». По крайней мере, в Firefox 33. Этот результат может быть другим в других браузерах. Я знаю, что это «экспериментальная технология», но, может быть, я чего-то не хватает. Что-то не так с моей реализацией?

Answer 1

Нет ничего плохого в вашем коде с точки зрения HTML и CSS. Независимо от того, является ли (предпочтительная) перенос, является, конечно, другая проблема.

Но Firefox фактически не реализует логику, описанную на странице MDN. Страница просто перекликается с old version черновика текста CSS3. current editor’s draft ставит вещи еще намного сильнее (и, скорее, сомнительно), для hyphens: auto (по умолчанию): «Автоматические возможности переносов в пределах слова должны игнорироваться, если слово содержит условный дефис (­ или U + 00AD), в пользу условного дефис (ы). Однако, если даже после взлома таких возможностей часть этого слова все еще слишком длинна для установки на одну линию, может быть использована возможность автоматической переносов ».

Что делает на самом деле Firefox, насколько мы можем судить по его поведению, заключается в том, что он рассматривает ­ как предполагающий возможность переносов, равную возможностям, которые он определил на основе своих алгоритмов переноса, если они используются (это зависит от заявленного языка и установленной поддержки различных языков в браузере).

Это означает, что при совместном использовании с автоматическими переносами, ­ нет (в данный момент) полезно в предложении предпочтительных переносов точки (т.е. точку, чтобы быть более предпочтительными, чем другие, которые могли бы быть определены с помощью Hyphenator броузера). Тем не менее, это полезно для указания точек переносов, которые иначе не использовались бы.

Если вы действительно хотите иметь «субдерматоглифический» дефис, чтобы перенос между «t» и «o» был возможен, но не между «o» и «g» (где большинство полномочий допускают перенос переносов), вы можете написать <a href="" lang="en">subdermat&shy;<span style="white-space: nowrap">og</span>lyphic</a>. Но это, вероятно, не стоит.