17

WebKit ブラウザーでハイフネーションをうまく実装できた人はいますか? CSS3hyphenationスタイルと-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>
4

3 に答える 3

25

-webkit-hyphens は iOS 4.2 以降で正常に動作し、webkit nightlies で部分的にサポートされています。

ウェブキット:

ウェブキット

iOS 4.3:

iOS 4.3

于 2011-03-18T21:15:43.083 に答える
13

Safari では動作しますが (OS X Lion の Safari 5.1 と iPad の Safari モバイルでテスト済み)、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 用です)

そのため、これまで大きな禁止事項であったブラウザの正当化されたテキストが、徐々に現実のものになりつつあります。

于 2011-12-01T01:44:57.393 に答える
3

より良い日が来ています..編集者の作業草案を閲覧した後- 提供されたインスタンスでは、将来的により良いプロパティは「overflow-wrap:」になると思います. 'hyphens:' は、一般的な書式設定要件により適していますが、overflow-wrap は、改行が必要な非常に長い単語の緊急の場合に適しています。最高の値は

* {
overflow-wrap:hyphenate. 
}

残念ながら、overflow-wrap は iPhone や Firefox ではまだサポートされていないようです。また、overflow-wrap:hyphenate はワーキング ドラフトにも含まれていません。（悲しい顔）

于 2012-04-27T02:28:53.543 に答える