如何縮小不適合持有人的文字？

我有包含動態文本的響應框（divs）。文本通常足夠短，以適應框中，但有時其中一些較大，不適合。如何縮小不適合持有人的文字？

我試圖解決這個問題，用text-overflow: ellipsis截斷文本，但這並不理想，因爲信息丟失了。媒體查詢斷點也沒有幫助，因爲它們影響整個頁面，而不僅僅是長文本框。

如何使非貼合文字響應，以便其尺寸自動縮小以適合其保持框？

2017-03-17 IsidroGH

這不可能與CSS只。您可以使用一些JavaScript來檢查內容的寬度並縮小字體大小直到適合，但這並不理想;首先，它不能將字體大小減小到用戶首選項中設置的最小大小以下;其次，如果沒有最小設置，則可能會嘗試將該例程一直減小到不可讀的1px，如果文本非常大。 –

所以你應該尋找一種解決方法。水平滾動條怎麼樣？一個垂直滾動條？ –

只是想確保它不能用CSS完成。儘管看起來有點髒，但我會嘗試JavaScript方法。（我不能使用滾動條） – IsidroGH

-1

一個可能的解決方案是保持父元素的寬度和高度爲百分比，然後將子元素作爲內嵌塊。這在極低分辨率下不是完美的解決方案，但對您的情況起作用。

.parent{ 
    width: 20%; 
    height: 20%; 
} 

.child{ 
    display: inline-block; 
}

2017-03-17 11:49:53

@MrLister yeaa我是probaby高我想：/編輯我的答案。 –

從另一個類似的問題，這個答案請看： https://stackoverflow.com/a/6112914/1129920

有了一點JS的你都能夠使文本調整到div的大小。

2017-03-17 11:50:32 krisboud

作爲評論會更好。只有在他們可以直接幫助問題的作者時發佈答案。如果你要推薦沒有代碼的東西，請在評論中進行。 –

雖然我試圖避免JS黑客，但我會嘗試這個。 – IsidroGH

如果你沒有設置div的高度，那麼它們裏面的文本只會增加div的大小，但不會超出divs的大小。

如果您嘗試截斷爲什麼不使用overflow: hidden。

或者，您可以創建一個類，以您懷疑可能包含長文本的div爲目標，並使它們具有em值作爲大小。而不是px

2017-03-17 11:53:21

我試圖避免截斷文本。文本是動態的，所以我不知道'div'將包含長文本的時間和時間。 – IsidroGH

我也希望實現它，但我只找到一個很好的工作Js這樣做。你可以看看它fittext.js

2017-03-17 12:07:15

Fittext似乎對我的需求很好。我會挖掘它。 – IsidroGH

回答