使用css縮小div內的文本字體大小

我有一個固定的寬度div，比如120px。其中的文字可以根據不同的字符數改變長度。例如，英語語言可以是"Compare"，俄語可以是"Добавить в сравнение"。使用css縮小div內的文本字體大小

現在div的寬度對於英文措辭是可以的，但對於Russion措辭而言，會發生溢出。 css是否有辦法在發生溢出時縮小字體大小。

我知道下面的CSS的用法，但我不想有省略號，並且即使它變得更小也想顯示全文。

overflow: hidden; 
text-overflow: ellipsis; 
white-space: nowrap;

編輯： 問題被標記爲另一個問題重複，但事實並非如此。另一個問題是，div是響應式的，而不是固定寬度，並且其內部的文本可以增長，而我的問題則詢問如何縮小文本，如果它更大。

來源

2017-08-30 Imran Ahmed

不，這不可能單獨使用CSS。您可以使用一些JavaScript來「衡量」文本的大小仍然適合（相當肯定現有的解決方案，因此做一些研究）。 – CBroe

嘗試使用css的vw屬性 –

@SanchitPatiyal vw屬性不會工作，因爲我有固定寬度的div。寬度不是問題，文本內容長度是問題:) –

請注意。使用width

即

white-space: nowrap; 
width: 16em; 
overflow: hidden; 
text-overflow: ellipsis;

來源

2017-08-30 10:12:13 user8256287

我不能使用靈活的寬度，容器的寬度必須固定爲120px，文本里面可以有不同的字體大小，但 –

那麼你的解決方案是什麼？ – user8256287

我仍在尋找它:) –

.content_div{ 
 
    font-size: calc(1.1vw + 1.1vh + 1.1vmin); 
 
    border:thin black solid; 
 
    outline:none; 
 
    padding:5px 2px; 
 
    width:120px; 
 
    overflow:hidden; 
 
    font-size-adjust: 0.25; 
 
}

<button class="content_div"> 
 
    Some Description Some Description 
 
</button>

這是相同的，你正在尋找？

希望這會有所幫助。

來源

2017-08-30 10:16:00

沒有我的朋友，我真的知道這個解決方案，但最大的缺點是，它削減了文本。我正在尋找的是字體大小減少以適應文本。 –

如果內容更多，它會在新行中出現嗎？ –

內容不會太長，可能是2到4個單詞，並且不會換到新行，帶有2行的按鈕看起來不太好，而是在更大內容的情況下更小字體的按鈕看起來更好 –

有關使用overflow: scroll與white-sapce: nowrap

<div class="content">Some text you want to display.</div> 

.content { 
    width: 100px; 
    overflow: scroll; 
    white-space:nowrap; 
}

如果您希望用戶看到整個文本，那麼這是你可以在不使用JavaScript做的最好的。這看起來很醜，但可以使用更多的CSS進行管理。

來源

2017-08-30 10:39:53 Ragas

它顯示瀏覽器滾動條，並使其非常醜陋，我認爲在這個問題的CSS沒有解決方案 –

是的，我同意。你必須使用js來獲得更好的結果。 – Ragas

使用css縮小div內的文本字體大小

回答

相關問題