0

私は、<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/

4

1 に答える 1

2

一般的な考え方は、 を取得し、が 未満になるoverflow:hiddenまでテキストを縮小し続けることです。そのようです：scrollHeightoffsetHeight

[].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";
  }
});

デモ

于 2013-06-20T17:44:44.273 に答える