我有一個固定高度（30像素）但寬度可變的容器，它向用戶顯示錯誤消息和警報。通常情況下，消息是兩個或三個字，並且看起來很好，但是當顯示較長的消息時，消息將顯示兩行，並在容器外用於顯示消息。調整任意長度文本以適應可變寬度，固定高度容器

我正在尋找一些方法來重新調整消息大小，以便它始終適合容器內。隨着寬度的減小，文本會變得更小，直到足夠小，以使兩行適合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小提琴鏈接，它允許您選擇不同長度的消息（實際的程序將從發送消息後端）。

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

我曾嘗試推行FitText.js，但同時我可以得到它的任何一個消息的工作好了，它不會以同樣的方式處理任意長度的消息。

對於它的價值是：我已經找到了我的一個類似的問題，但它與圖像，而不是文本交易，所以解決的辦法是比我感興趣的完全不同：Center a Variable Width/Height Image Inside Fixed Height/Variable Width Container

來源

2016-03-03 Brian C

你試試這個：http://simplefocus.com/flowtype/？ –

這並沒有幫助我害怕。（還是）感謝你的建議。 –

更新答案

看到這個new fork。只是做了一點用JavaScript怪異的東西，試圖找到基於寬度爲字體大小的最佳比例：

相關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您的字體大小。這是fork of your fiddle。有關CSS部分是：

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

不同的屏幕尺寸：

這被稱爲「視口大小的版式」，這裏是一個relevant article on CSS tricks。

相對於當前視口大小，vw，vh和vmin，CSS3有一些用於確定事物大小的新值。

在某些情況下，可能會有些挑剔，所以您可能需要使用CSS尺寸來嘗試找到最適合您的用例的值。

來源

2016-03-04 00:10:58

謝謝！我也嘗試過vw，但IE仍然讓它有時會從容器中出來。當它有足夠的空間進入下一條線時，它會繼續縮小。如果您將小提琴的大小調整得更小，則第一張照片中的文字會變得越來越小，而不是像「地方」那樣添加「我需要適合其全部使用」。純CSS解決方案並不是必要的，反正這個網站上運行着大量的javascript。 –

@AlphaBetaParkingLot用另一次嘗試更新了我的答案 –

再次感謝。技術上符合我給出的描述，但是以使文本不必要地小而難以閱讀爲代價，請注意，即使是非常短的消息也會縮短爲長時間的消息。所以這不符合我的需要。但+1爲你的幫助沒有那麼少。我會繼續玩。 –

您已在可變寬度容器中指示可變長度消息，其中必須保留在一行上。這有一些含義：

最大字符數。如果消息包含1000個字符會發生什麼？ 2000？
最小文本大小。在用戶難以辨認之前，文本有多小？
容器的最小寬度。

這些值應該爲JavaScript或CSS解決方案定義。 FitText應該爲你工作。

設置您的頁面，其中包含消息的最大字符數，並將瀏覽器設置爲最小寬度。然後調整FitText函數以使文本易讀並放入容器中。

這可能會爲你使用FitText工作：

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

和下面的行添加到您的CSS

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

來源

2016-03-04 02:02:45 Robert

我從來沒有說過它需要在一條線上。只有它不能離開容器。容器的高度爲30px，因此2行12px高的字體完全可以接受。 –

我現在不在我的電腦，但會明天再試。 –

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

回答

更新答案

原來的答案

相關問題