更新回答

Question

我有一个固定高度（30px）的容器，但宽度可变，向用户显示错误消息和警报。通常消息是两个或三个单词并且看起来很好，但是当显示更长的消息时，它会进入两行，并且在用于显示消息的容器外部。

我正在寻找一些方法来重新调整邮件大小，使其始终适合容器。随着宽度减小，文本将变得更小，直到它足够小，以便两条线适合30px高容器，然后它将这样做。

HTML

<body>
<div class="go-nogo-box">
    <div class="go-nogo-container">
        <h2 class="go-nogo-status">Error Message!</h2>
    </div>
</div>

CSS

.go-nogo-box{
width: 80%;
margin:0 auto 10px auto;
}

.go-nogo-container h2{
    height: 50%;
}

.go-nogo-container{
    border-color: #999;
    border-width: 1px;
    border-style: solid;
    clear: both;
    padding:15px;
    background-color: #FFFFFF;
    border-radius: 40px;
    height: 30px;
}
.go-nogo-status{
    font-weight: bold;
    text-align: center;
    font-size: 32px;
    font-variant: small-caps;
    font-family: Arial, Helvetica, sans-serif;
}

@media (max-width: 1100px){
    .go-nogo-box{
        width:100%
    }
}

请查看JS Fiddle Link ，它允许您选择不同长度的消息（实际程序将从后端发送消息）。

https://jsfiddle.net/alphabetaparkinglot/4rwb6j56/5/

我尝试过实现FitText.js，但是虽然我可以让它对任何一条消息都正常工作，但它不会以同样的方式处理任意长度的消息。

对于它的价值：我发现了一个与我相似的问题，但它处理图像而不是文本，所以解决方案与我感兴趣的完全不同：Center a Variable Width/Height Image Inside Fixed Height/Variable Width Container

Answer 1

更新回答

见new fork。用JavaScript做一些奇怪的事情，尝试根据宽度找到字体大小的最佳比例：

原始答案

一种可能的纯CSS解决方案是根据.go-nogo-status{ font-weight: bold; text-align: center; font-size: 3vw; /* here */ font-variant: small-caps; font-family: Arial, Helvetica, sans-serif; }制作字体大小。这是一个fork of your fiddle。相关的CSS部分是：

{{1}}

不同的屏幕尺寸：

这被称为“视口大小的排版”，这里是relevant article on CSS tricks。

CSS3有一些新值可用于调整与当前视口大小相关的内容：vw，vh和vmin。

在某些情况下，可能有点笨拙，因此您可能需要使用CSS大小来尝试找到最适合您的用例的值。

Answer 2

您已在可变宽度容器中指示了一个可变长度消息，必须保留在一行上。这有一些含义：

最大字符数。如果邮件包含1000个字符会怎样？ 2000？
最小文字大小。文本在用户难以识别之前有多小？
容器的最小宽度。

应为JavaScript或CSS解决方案定义这些值。 FitText应该适合你。

使用您知道的消息的最大字符数设置页面，并将浏览器设置为最小宽度。然后调整FitText函数以使文本清晰易读并适合容器。

这可能适合您使用FitText：

$(".go-nogo-status").fitText(4, { minFontSize: '15px', maxFontSize: '32px' });

并将以下行添加到CSS

.go-nogo-container{
    white-space: nowrap; 
}

调整任意长度的文本大小以适应可变宽度，固定高度容器

2 个答案:

更新回答

原始答案