計算最大字體大小而無需觸發滾動條

Question

我有一個功能，如果檢測到滾動條，即，如果有足夠的內容觸發滾動條，則按比例減小字體大小。

 window.onload = function(e) { if (document.body.scrollHeight > document.documentElement.clientHeight) { document.body.style.fontSize = "7px"; } console.log(document.body.scrollHeight); console.log(document.documentElement.clientHeight); } 

 body { color: black; font-family: 'Open Sans', sans-serif; padding: 40px; font-size: 10px; } li { font-size: 4.5em } 

 <div class="content"> <ul> <li>Stuff</li> <li>Stuff</li> <li>Stuff</li> <li>Stuff</li> <li>Stuff</li> <li>Stuff</li> <!--if more stuff added - reduce the font size the right amount so there's is no scroll bar present.--> </ul> </div> 

但是正如您所看到的，無論頁面上的內容量如何，我當前都將靜態字體大小設置為7px。 我要實現的是根據頁面中的內容，計算內容可以具有的最大字體大小，而不會觸發滾動條。

我該如何實現？

Answer 1

這是您要找的東西嗎？

 if (document.body.scrollHeight > document.documentElement.clientHeight) { document.body.style.fontSize = "7px"; } else { document.body.style.fontSize = "4.5em"; } 

 body { color: black; font-family: 'Open Sans', sans-serif; padding: 40px; font-size: 10px; } 

 <div> <ul> <li>Stuff</li> <li>Stuff</li> <li>Stuff</li> <li>Stuff</li> <li>Stuff</li> <li>Stuff</li> <li>Stuff</li> <li>Stuff</li> <li>Stuff</li> <li>Stuff</li> <li>Stuff</li> <li>Stuff</li> <li>Stuff</li> <li>Stuff</li> <li>Stuff</li> <li>Stuff</li> <li>Stuff</li> <li>Stuff</li> <li>Stuff</li> <li>Stuff</li> <li>Stuff</li> <li>Stuff</li> //if more stuff added - reduce the font size the right amount so there's is no scroll bar present. </ul> </div> 

Answer 2

好吧，這完全取決於您的字體樣式。 但基本上，您需要將字體大小設為-ul高度（或您想放入的任何滾動元素）除以其子代數。

let ulHeight = document.querySelector('.content ul').clientHeight;
let lisCount = document.querySelector('.content ul').childElementCount; 

let lis = document.querySelectorAll('.content ul li');

[].forEach.call(lis, function(li) {
  li.style.fontSize = Math.floor((ulHeight / lisCount) -2) + 'px' 
});

查看這個小提琴

在此示例中，字體樣式太大而無法完美地適合ul，因此我將其縮小了2個像素。 注意，我已經將除法取整並且ul的高度是固定的。 修改ul高度或添加更多lis以查看其工作原理。

Answer 3

通過調整窗口大小或更改內容來嘗試這一操作。 我已將最大字體大小設置為60px。 也許你可以改變它。 另外，為了便於閱讀，您可以設置最小字體大小。

 function resize() { var defaultSize = 60; $('.content').css('font-size', defaultSize + 'px'); for (i = defaultSize; document.body.scrollHeight > (document.documentElement.clientHeight*.95); i--) { $('.content').css('font-size', i + 'px'); } } $(document).ready(function () { resize(); }); $(window).resize(function () { resize(); }) 

 ul,li{ margin: 0; padding: 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="content"> <ul> <li>Stuff</li> <li>Stuff</li> <li>Stuff</li> <li>Stuff</li> <li>Stuff</li> <li>Stuff</li> <li>Stuff</li> <li>Stuff</li> <li>Stuff</li> <li>Stuff</li> <li>Stuff</li> <li>Stuff</li> <li>Stuff</li> <li>Stuff</li> <li>Stuff</li> <li>Stuff</li> <li>Stuff</li> <li>Stuff</li> </ul> </div>