Question

问题=带有缩放（CMD +）的文本溢出容器。

缩放前=

缩放后=

以下解决了这个问题，但我非常不愿意接受ViewPort单位，因为他们缺乏所有当前浏览器的完整支持，更不用说旧版浏览器：

html {
    font-size: 16px;
    font-size: 2.4vw;
}

ViewPort单位的另一个更严重的问题是它们显然会随着窗口大小而缩放，而我不希望这样做。

我希望：使用窗口大小调整（1） 没有任何事情发生到font-size。 （2） ...但我希望减小font-size，以便在缩放时不会发生上述容器溢出。 （3）尽可能避免使用Javascript和CSS @media查询。

以下是适当的代码：

HTML -

    <div id="roundedTextCorners" class="centerBlockContents">
        <div class="headerText">
MY VERY OWN GUARDIAN ANGEL!<p>

MY LOVE SONG FOREVER!!
        </div>
    </div>

CSS -

#roundedTextCorners {
    border:           0.3125em #994c00 solid;
    border-radius:    0.625em;

    padding:          1.0em 1.0em 1.0em 1.0em;

    background-color: #994c00;
    color:            #fff;
}

.centerBlockContents {
    text-align: center;
}

.headerText {
    font-family: Georgia, Helvetica;
    font-size:   1.60em;   /* at the top level */
    color:       #fff;

    padding:     1.0em 1.0em 1.0em 1.0em;
}

任何想法??

Answer 1

首先，感谢利斯特先生，我坚持不懈地应对这一挑战。

我终于决定采用＆＃34;解决方案＆＃34;我很高兴。不可避免地，我决定最大宽度必须在某个地方，<body>或@media。我之所以选择@media，是因为我总结说我鄙视水平滚动条而不是@media固有的急动。

带缩放的文本溢出容器（CMD +）

1 个答案: