2

問題が発生していますが、何が原因なのかわかりません。レスポンシブ デザインで使用するクールなフォントを購入しました。特定のウィンドウ サイズでは、ウィンドウの端でフォントが切り取られます。スクリーンショットは次のとおりです。
ここに画像の説明を入力

CSS3 word-break を使用すると何とか解決しますが、この場合は使用したくありません。他のオプションはありますか？
私は CSS のみのオプションを希望しますが、JavaScript または jQuery が関係している場合でも問題ありません。

使用されるフォントはMyFonts の Armitage Black Italic です。そのテキストのCSSは次のとおりです。

.text {
    font-weight: normal;
    margin-bottom: 24px;
    color: blue;
    font-family: ArmitageBlack-Italic, sans-serif;
    font-size: 3.75em;
    line-height: .85;
    text-transform: uppercase;
    letter-spacing: -0.29ex;
}

この問題は、フォントが十分に大きい限り、どのフォントでも再現できます。フォントがイタリック体である場合、それは非常に明白です。
テキストはこのコンテナ内にあります:

.container {
    display: table;
    width: 100%;
    height: 100%;
    padding-top: 25px;
    background-color: grey;
    text-align: center;
}
4

1 に答える 1

1

テキストが斜体の場合、テキストは「ある」場所の外に表示されます。大きなフォントを使用すると、問題はさらに悪化します。それを修正する唯一の方法は、私が知る限り、パディングをハックして追加することです:(

于 2013-03-03T15:31:35.853 に答える