固定宽度和高度的灵活字体大小

Flexible Font Size for fixed width and height

本文关键字：字体 高度 固定宽度      更新时间：2023-09-26

我需要使我的每个<p>都具有固定宽度和高度的灵活字体大小。

当前代码

CSS

p{
    width:500px;
    height:100px;
    background-color:#F0F0F0;
    margin:10px;
    padding:5px;
    font-size:24px;
}

HTML

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra quis dui a laoreet. Proin nibh dolor, faucibus sit amet aliquet ac, varius id eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra quis dui a laoreet. Proin nibh dolor, faucibus sit amet aliquet ac, varius id eros. consectetur adipiscing elit. Duis pharetra quis dui a laoreet. Proin nibh dolor, faucibus sit amet aliquet ac, varius id eros.</p>
<br><br><br>
<br><br><br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra quis dui a laoreet. Proin nibh dolor, faucibus sit amet aliquet ac, varius id eros, faucibus sit amet aliquet ac, varius id eros.</p>
<br><br><br>
<!-- This one is perfect -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra quis dui a laoreet. Proin nibh dolor, faucibus sit amet aliquet ac, varius id eros.</p>

检查并尝试jsfiddle 中的代码

http://jsfiddle.net/8GNAV/

这就是我想要到达的输出

http://jsfiddle.net/8GNAV/1/

一般的想法是获得overflow:hidden，然后不断收缩文本，直到scrollHeight小于offsetHeight。像这样：

[].forEach.call(document.getElementsByTagName('p'),function(p) {
  p.style.overflow = "hidden";
  var f = 24;
  while(f > 6 && p.scrollHeight > p.offsetHeight) {
    f--;
    p.style.fontSize = f+"px";
  }
});

演示

相关文章：