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 回答