web-dev-qa-db-ja.com

WebKitハイフネーション

誰かがWebKitブラウザのいずれかでハイフネーションを正常に実装できましたか？ CSS3 hyphenationスタイルと-webkit-hyphens: autoを試しました。それらのどちらにもサイコロはありません。それとも私は何か間違ったことをしているのでしょうか？

注：MacではSafariとChromeのみを試しました。

更新：コード例

<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>
csswebkithyphenation
16
dandax

-webkit-hyphensはiOS4.2以降で正常に機能し、webkitnightliesで部分的にサポートされています。

Webkit：

Webkit

iOS 4.3：

iOS 4.3

25
Rich Bradshaw

Safari（OS XLionのSafari5.1およびiPadのSafarimobileでテスト済み）では動作しますが、Chromeはまだです。 http://caniuse.com/css-）を参照してください。 hyphens 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用です）

そのため、ブラウザで正当化されたテキストは、大きなノーノーでしたが、徐々に現実のものになりつつあります。

12
nachomaans

より良い日が来ています.. 編集者作業ドラフト -提供されたインスタンスでは、将来のより良いプロパティは「オーバーフローラップ：」になると思います。 'hyphens：'は、一般的なフォーマット要件に非常に適していますが、overflow-wrapは、区切りが必要な長すぎる単語の緊急の場合に適しています。最良の値は

* {
overflow-wrap:hyphenate. 
}

残念ながら、オーバーフローラップはiPhoneやFirefoxではまだサポートされていないようで、overflow-wrap：hyphenateは作業中のドラフトにも含まれていません。 （悲しい顔）

3
adriatiq