8

私はトリッキーな質問であなたのところに来ます：

次の基本構造があると想像してください。

<div><p>hello</p></div>

ここで、divに。があると仮定しますdisplay:block; and width:200px;。javascriptを使用して、水平方向のオーバーフロー（1つの単語の場合）または文または単語のグループの場合に2行目にジャンプすることなく、可能な限り大きな「hello」を提供するフォントサイズをどのように確認しますか？

要素がオーバーフローしているかラインジャンプしているかどうかをチェックすることは言うまでもなく、テキストが占めるスペースを測定して、親コンテナのスペースと照合できるようにする方法を考えることはできません。

方法があれば、これが正しい質問の場所だと確信しています。

4

5 に答える 5

4

FitTextを見てみましょう

githubでもオープンソースです。

タイポグラフィに興味がある場合は、Lettering.jsと呼ばれる他のプロジェクトをチェックしてみてください。

于 2013-03-15T01:14:03.427 に答える
2

それほどクレイジーではない方法があるかもしれませんが、これは可能な限り正確であるべきです。基本的に、幅を測定するために使用する div があり、ターゲット div の幅を超えるまでテキスト コンテンツを段階的に増やします。次に、ターゲット div の<p>フォント サイズを測定 div のマイナス 1 に変更します。

http://jsfiddle.net/ExplosionPIlls/VUfAw/

var $measurer = $("<div>").css({
    position: 'fixed',
    top: '100%'
}).attr('id', 'measurer');
$measurer.append($("<p>").text($("p").text()));
$measurer.appendTo("body");

while ($measurer.width() <= $("#content").width()) {
    $("#measurer p").css('font-size', '+=1px');
    console.log($("#measurer").width());
}
$("#measurer p").css('font-size', '-=1px');
$("#content p").css('font-size', $("#measurer p").css('font-size'));
$measurer.remove();
于 2013-03-15T01:16:48.233 に答える
1

速くて汚い

フィドル

pのスタイルを設定してdisplay: inline、これを実行します

var dWidth = $("div").width();
var pWidth = $("p").width();
var starting = 1;
while (pWidth < dWidth) {
    $("p").css("font-size",starting+"em");
    pWidth = $("p").width();
    starting = starting + .1;
}
于 2013-03-15T01:22:39.287 に答える
0

これを試して：

動的テキストのサイズを自動調整して、固定サイズのコンテナーに合わせます 

(function($) {
    $.fn.textfill = function(options) {
        var fontSize = options.maxFontPixels;
        var ourText = $('span:visible:first', this);
        var maxHeight = $(this).height();
        var maxWidth = $(this).width();
        var textHeight;
        var textWidth;
        do {
            ourText.css('font-size', fontSize);
            textHeight = ourText.height();
            textWidth = ourText.width();
            fontSize = fontSize - 1;
        } while ((textHeight > maxHeight || textWidth > maxWidth) && fontSize > 3);
        return this;
    }
})(jQuery);

$(document).ready(function() {
    $('.jtextfill').textfill({ maxFontPixels: 36 });
});

<div class='jtextfill' style='width:100px;height:50px;'>
    <span>My Text Here</span>
</div>
于 2013-03-15T01:15:22.290 に答える
0

新しい jsFiddle デモ( 2013 年 3 月 22日更新)

clientWidth または clientHeight が変更されるまで、フォント サイズを増やし続けます。ただし、実際の要素自体を使用する場合、これは信頼できなくなります。そのような状況に対処するために、その場でスパンを作成し、実際の要素の元のサイズを適切に保持するためにスパンの寸法を監視することができます。

js

var adjuster = document.getElementById("adjust");
adjuster.onclick = function(){
 var p = document.getElementById("p");
 var text = p.innerText;
 var s = document.createElement("span");
 s.innerText = text;
 p.innerHTML = "";
 p.appendChild(s);
 var h = p.clientHeight;
 var w = p.clientWidth;
 var size = 10;
 while(true){
  size++;
  s.style.fontSize = size + "px";
  if($(s).height() > h || $(s).width() > w){
   size-=2;//rollback to no height change
   s.style.fontSize = size + "px";
   break;
  }
 }
 p.style.fontSize = s.style.fontSize;
 p.removeChild(s);
 p.innerText = text;
};
于 2013-03-15T01:18:17.900 に答える