7

CSS ハイフンを使用しようとしています。それらは IE 11 と Safari では動作しますが、Firefox では正しく動作しません。その理由はわかりません。次に例を示します。

.container{
    width: 16.6667%;
    background:#ccc;
}
h3{
    font-size: 0.95rem;
    font-weight: 600;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}
<div class="container">
<h3>DIAGNOSEVERFAHREN</h3>
</div>

Firefox でスニペットを実行すると、単語DIAGNOSEVERFAHRENがコンテナーからはみ出して壊れません。Safari と IE では、期待どおりに壊れます。これが Firefox で機能しないのはなぜですか?

編集

Marat Tanalin's answerで指摘されているように、ハイフンが正しく機能するには lang 属性を含める必要があります。私はこれを<html>タグとして持っています：

<html class="no-js" lang="de">
4

4 に答える 4

1

ios safari でこの種の問題が発生しました。そのページには複数のハイフンがあり、それらのいくつかは機能していましたが、機能していませんでした。しかし、私は text-transform:uppercase を使用することは想定されていないので、フォント サイズを 1px に大きくするとうまくいきました。

于 2016-09-08T13:22:14.177 に答える
0

ハイフネーションの概念を示すには、親要素で lang 属性を en に設定する必要があります。

于 2018-05-30T10:31:29.160 に答える