WebKit Hyphenation - PullRequest
Новая
       13

WebKit Hyphenation

16 голосов
/ 18 марта 2011

Кто-нибудь успешно смог реализовать переносы в любом из браузеров WebKit?Я пробовал стиль CSS3 hyphenation, а также -webkit-hyphens: auto.Никаких кубиков ни для одного из них.Или, может быть, я что-то не так делаю?

Примечание: я пробовал Safari и Chrome только на Mac.

Обновление: Пример кода 

<html>
  <head>
    <style>
      div {
        -webkit-hyphens: auto;
      }
    </style>
  </head>
  <body>
     <div style="width: 150px; border: solid 1px black;">
       <p>Anaideia, spirit of ruthlessness, shamelessness, and unforgivingness</p>
       <p>Supercalifragilisticexpialidocious, Antidisestablishmentarianism, Floccinaucinihilipilification, Hippopotomonstrosesquipedaliophobia</p>
     </div>
  </body>
</html>

Ответы [ 3 ]

25 голосов
/ 19 марта 2011

-webkit-дефис прекрасно работает на iOS 4.2 и выше и частично поддерживается в ночных веб-играх.

Webkit:

Webkit

iOS 4.3:

iOS 4.3

12 голосов
/ 01 декабря 2011

Работает в Safari (протестировано с Safari 5.1 на OS X Lion и Safari mobile на iPad), но пока не с Chrome. См. http://caniuse.com/css-hyphens для поддержки браузера через дефис.

Вот как стилизованы абзацы в проекте 320 и выше (http://www.stuffandnonsense.co.uk/projects/320andup/):

p {
    hyphens:auto;
    text-align:justify;
    -webkit-hyphens:auto;
    -webkit-hyphenate-character:"\2010";
    -webkit-hyphenate-limit-after:1;
    -webkit-hyphenate-limit-before:3;
    -moz-hyphens:auto;
}

(последняя строка для Firefox)

Так оправданный текст в браузерах, который был большим нет-нет, постепенно становится реальностью.

3 голосов
/ 27 апреля 2012

Наступают лучшие дни ... После просмотра рабочего проекта Editors - В данном случае, я думаю, что лучшим свойством в будущем будет 'overflow-wrap:'. 'дефис:' действительно больше подходит для общих требований к форматированию, тогда как переполнение - для экстренных случаев слишком длинных слов, которые требуют прерывания. Наилучшее значение будет 

* {
overflow-wrap:hyphenate. 
}

Увы, переполнение-переполнение, похоже, пока что не поддерживается на iphone или firefox, а переполнение-перенос: дефиса даже нет в рабочем проекте. (Sadface)

...