調整任意長度的文本大小以適應可變寬度，固定高度容器

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，但是雖然我可以讓它對任何一條消息都正常工作，但它不會以同樣的方式處理任意長度的消息。

值得一提的是：我找到了類似的問題，但它處理的是圖像，而不是文本，所以解決方案與我感興趣的完全不同：將固定高度/可變寬度內的可變寬度/高度圖像居中容器

Answer 1

更新的答案

看到這個新的叉子。 用JavaScript做一些奇怪的事情，嘗試根據寬度找到font-size的最佳比例：

相關JS：

    $('.go-nogo-status').text(message);
    $('.go-nogo-status').css('font-size', '100%');

    var w = $('.go-nogo-status').width();
    $('.go-nogo-status').css('font-size', (w*3)/w + 'vmin')

相關CSS：

.go-nogo-status{
    font-weight: bold;
    text-align: center;
    font-size: 3vw;
    font-variant: small-caps;
    font-family: Arial, Helvetica, sans-serif;
    display: inline-block;
    margin-left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}

基本上只是一堆大小，試圖讓它看起來正確。 似乎在我的瀏覽器中可以使用所有視口大小（將所有內容保存在一行和紅色錯誤區域內）。

原始答案

一種可能的純CSS解決方案是根據vw制作字體大小。 這是你小提琴的一個分支。 相關的CSS部分是：

.go-nogo-status{
    font-weight: bold;
    text-align: center;
    font-size: 3vw;  /* here */
    font-variant: small-caps;
    font-family: Arial, Helvetica, sans-serif;
}

不同的屏幕尺寸：

這被稱為“視口大小的排版”，這里是關於CSS技巧的相關文章。

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 個解決方案

解決方案1
2 2016-03-04 00:10:58

更新的答案

原始答案

解決方案2
0 2016-03-04 02:02:45

調整任意長度的文本大小以適應可變寬度，固定高度容器

問題描述

2 個解決方案

解決方案1 2 2016-03-04 00:10:58

更新的答案

原始答案

解決方案2 0 2016-03-04 02:02:45

解決方案1
2 2016-03-04 00:10:58

解決方案2
0 2016-03-04 02:02:45