2

「ハイフン」を「自動」に設定すると、「空白: nowrap」よりも優先されるようになりました。以前のバージョンの Chrome (Mac では 54 より前) およびその他のブラウザー (FF、Safari、IE) では、「空白: nowrap」がハイフンを上回っているようです。したがって、white-space: nowrap および text-overflow: ellipsis を指定すると、ハイフンの設定に関係なく、テキストが省略記号で切り捨てられることがわかります。

55.0.2883.95(Mac版)からは、ハイフン:オートで空白:ナウラップを指定しても改行するようです。ハイフンとナウラップを同時に指定するのはばかげているように聞こえることに同意します..しかし、これは「新しい」動作であるため、これがバグなのか意図された動作なのかを確認したいと思います.

この問題をテストして、他のブラウザー間で動作を比較するための簡単なフィドルを作成しました。

div {
  width: 75px;
  border: 1px solid black;
}
div.testCls {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}
<div lang="en" class="testCls">Anextremely long English word</div>

スクリーンショット:

Mac 55.0.2883.95 (64 ビット) の Chrome

4

2 に答える 2

0

それはクロムの問題だと思います。同じコードが Firefox と Safari で正常に動作します。

これを修正するには、hyphens:none; を追加するだけです。あなたのトランケートクラスに。

于 2017-01-04T03:13:20.067 に答える