需要最大化放大量并最小化缩小量

Question

我需要最大化放大量和最小化缩小量。

简而言之，我不希望文字等过于太大 或 太小（所以它不能读取）。

问题是如何？

目前，我对用户可以进行的缩放量没有限制。

Safari并不太可怕，但 Chrome很糟糕只是因为它允许用户使超级超级窗口。直接的结果是，椭圆内的单词几乎突破了每行一个字母的程度。

这是正常的，没有缩放的样子：

以下是放大到最大值后的样子：

我知道问题是什么，也就是说，它被放大得太远，以至于完全放大的尺寸超过了外壳的宽度。

正是出于这个原因，我希望通过防止放大到远来限制损害。同样可以缩小到太小的范围。

问题是如何？

HTML：

<section class="roundedTextCornersWrapper centerBlock">

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

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

</section>

CSS：

.roundedTextCornersWrapper {
    /* + a tad extra more push up above .restofContent */
    padding-bottom: 2.0em;
}

.roundedTextCorners {
    border:           0.3125em #994c00 solid;
    border-radius:    0.625em;
    background-color: #994c00;
    color:            #fff;
}

.headerText {
    font-family: Georgia, Helvetica;
    font-size:   1.60em;
    color:       #fff;

 /*
    vertical-align: middle;   // does not work here??
 */
    padding:     1em 0em 0em 0em;   /* a tweak on padding-top */
    text-align:  center;
}

.superLongStuff {   
    overflow-wrap:   break-word;
    word-wrap:       break-word;
}