Q
動態調整字體大小
3
A
回答
0
您可以使用javaScript並使字體大小越來越小(或越來越大),直到具有文本的子元素的高度符合父元素的高度。更改文本的font-size
和容器的width
height
以查看效果。
var samp = document.getElementById('samp');
fitFont(samp);
function fitFont(elem){
var child = elem.children[0];
var getFontSize = parseFloat(window.getComputedStyle(child).getPropertyValue('font-size'));
while(child.offsetHeight>elem.clientHeight){
getFontSize -= .1;
child.style.fontSize = getFontSize + 'px';
if(child.offsetHeight<=elem.clientHeight){
child.style.visibility = 'visible';
return;
}
}
while(child.offsetHeight<elem.clientHeight){
getFontSize += .1;
child.style.fontSize = getFontSize + 'px';
if(child.offsetHeight>=elem.clientHeight){
child.style.visibility = 'visible';
return;
}
}
}
#samp {
background-color:white;
width:280px;
height:100px;
border:solid 2px #33aaff;
}
#samp span {
display: inline-block;
visibility:hidden;
font-size:50px;
}
<div id="samp">
<span>text is bigger now and goes outside of div text is bigger now and goes outside of div text is bigger now and goes outside of div text is bigger now and goes outside of div
</span>
</div>
0
你要得到的是設置在外部容器&文本容器大衆和VH值最接近的事,和文本容器的字體大小VMIN。
.outer {
width: 100vw;
height: 100vh;
}
.text {
width: 30vw;
height: 30vh;
border: solid 1px #269abc;
font-size: 10vmin;
}
<div class='outer'>
<p class='text'>This is text</p>
</div>
除此之外,你會需要使用JavaScript/jQuery的
+0
錯過了'沒有包裝' - 哎呀。簡短的回答 - 不。目前不可能。 CSS變量正在起作用 - 所以可能很快就是了。 https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables – Inkdot
相關問題
- 1. 自動調整UILabel字體大小
- 2. 自動調整字體大小
- 3. 字體調整大小HTML
- 4. 動態文本 - 字體自動調整大小
- 5. 自動調整大小的單元格/動態字體在ios8
- 6. Flash動態調整大小
- 7. iFrame動態調整大小
- 8. $ .dialogue()動態調整大小
- 9. 調整字體大小 - 字體屬性
- 10. 使用JQuery調整窗口大小調整CSS字體大小
- 11. 調整div大小時調整字體大小
- 12. 根據內容字體大小動態調整UIWebView的尺寸
- 13. 動態調整文本視圖的字體大小
- 14. CSS:在100vh的容器中動態調整字體大小
- 15. 基於手機屏幕動態調整字體大小
- 16. Java自動調整到Windows 7字體大小調整
- 17. dxTab動態字體大小
- 18. 字體大小動態
- 19. Css動態字體大小
- 20. 字體,大小動態
- 21. 動態調整大小的數字,因爲窗口在JavaFX中調整大小
- 22. 文字字體調整大小
- 23. 媒體查詢字體大小未調整大小
- 24. 獲取模態以在窗口大小調整時動態調整大小
- 25. 根據窗體調整大小和調整窗體控件調整大小
- 26. 帶有動態字體大小調整和容器流體的Bootstrap導航欄?
- 27. 字體真棒不會調整大小
- 28. 調整特殊字體的大小
- 29. 調整Android WebView的字體大小
- 30. 如何調整字體大小
沒有,沒有。有一些類似的JS/jQuery插件 – Johannes
好問題,看看這個:http://stackoverflow.com/questions/16056591/font-scaling-based-on-width-of-container –