web-dev-qa-db-ja.com

divのサイズに影響を与えることなく、div（高さと幅）内にテキストを完全に収めます

この質問は以前にも何度も出てきたことを知っているので、事前に謝罪しますが、正しい解決策を見つけることができないようです（そして、私がいくつか試したことがあると信じています！）

基本的には古い「divのサイズに影響を与えずにdiv内にテキストを完全に収める」です。そして、私が完全な麻痺者でない限り、CSSにはこれを行う方法はないと考えています。つまり、基本的には次のようなことをするということではありません。

#someDiv {
font-size: 12px;
}

または...

#someDiv {
font-size: 1em;
}

...私はこのようなことをしたいです：

#someDiv {
font-size: fluid;
}

...つまり、このdivに含まれるテキストが何であれ、左から右、上から下に完全に収まるようにスケーリングし、オーバーフローや空白はありません。

このCSSソリューションを探している無数のWebサイトを探し回った後、私はCSSがこれに対応していないことを受け入れました...それで、jQueryを入力してください。

オンラインでいくつかのjQueryソリューションを見つけましたが、それらはテキストを幅に合わせて拡大縮小するだけですが、高さにも拡大縮小したいです。事実上、jQueryに言いたいことがあります。

「jQuery、$（this）divを見つけて、その中にあるテキストは何でも、divの高さと幅全体をできる限りきちんと埋めるようにスケーリングしてほしい」

自分自身をあまり説明していない場合は、直面している問題と探している解決策を説明するグラフィックを添付しました。

どんな助けでも大歓迎です。ありがとうございました。

enter image description here

jquerycssfont-size
24
Ben Clarke

同じ答えがありますが、Javascriptで

var autoSizeText;

autoSizeText = function() {
  var el, elements, _i, _len, _results;
  elements = $('.resize');
  console.log(elements);
  if (elements.length < 0) {
    return;
  }
  _results = [];
  for (_i = 0, _len = elements.length; _i < _len; _i++) {
    el = elements[_i];
    _results.Push((function(el) {
      var resizeText, _results1;
      resizeText = function() {
        var elNewFontSize;
        elNewFontSize = (parseInt($(el).css('font-size').slice(0, -2)) - 1) + 'px';
        return $(el).css('font-size', elNewFontSize);
      };
      _results1 = [];
      while (el.scrollHeight > el.offsetHeight) {
        _results1.Push(resizeText());
      }
       return _results1;
    })(el));
  }
  return _results;
};

$(document).ready(function() {
  return autoSizeText();
});

ところで... coffeescriptをjavascriptに変換する必要がある場合は、 js2coffee.org に移動してください。

15
joshboley

私は最近自分に似たものを望んでいました：

<div class='container'>
    <div class='no-resize'>This text won't be resized and will go out of the div.</div>
    <div class='resize'>This text will be resized and wont go out of the div.</div>
</div>

そして

.no-resize, .resize {
    width: 100px;
    height: 50px;
    border: 1px solid #000;
    color: #000;
    float: left;
    margin-left: 10px;
    font-size: 15px
}

jsfiddle.net/mn4rr/1/ のフィドラー。

10
Thomas McNaught

受け入れられた答えにコメントするほどの評判がありませんので、答えました。 heightにcss3遷移がある場合、autoSizeText()および$.resizeText上記の回答には問題があります。これを修正するために短いjqueryプラグインを作成しました。

$.fn.resizeText = function (options) {

    var settings = $.extend({ maxfont: 40, minfont: 4 }, options);

    var style = $('<style>').html('.nodelays ' +
    '{ ' +
        '-moz-transition: none !important; ' +
        '-webkit-transition: none !important;' +
        '-o-transition: none !important; ' +
        'transition: none !important;' +
    '}');

    function shrink(el, fontsize, minfontsize)
    {
        if (fontsize < minfontsize) return;

        el.style.fontSize = fontsize + 'px';

        if (el.scrollHeight > el.offsetHeight) shrink(el, fontsize - 1, minfontsize);
    }

    $('head').append(style);

    $(this).each(function(index, el)
    {
        var element = $(el);

        element.addClass('nodelays');

        shrink(el, settings.maxfont, settings.minfont);

        element.removeClass('nodelays');
    });

    style.remove();
}

このプラグインを使用するには、呼び出す必要があります

 $(selector).resizeText();

これにより、誰か他の人のトラブルシューティングの時間が節約されることを願っています。上記のコードがページ上で無限ループを引き起こしているのではないかと疑問に思って、頭を掻くのに20分も費やしました。

8
Kelt

JQueryプラグインを作成することでこれを解決しました。ここにあります。 http://jsfiddle.net/c9YNz/2/ （ウィンドウのサイズ変更に対応するために更新されました）

プラグインのコードは、テキストを0.01emサイズに縮小してから、それに合わせて拡大します。プラグインコードは次のとおりです。

$.fn.resizeText = function () {
    var width = $(this).innerWidth();
    var height = $(this).innerHeight();
    var html =  $(this).html();
    var newElem = $("<div>", {
        html: html,
        style: "display: inline-block;overflow:hidden;font-size:0.1em;padding:0;margin:0;border:0;outline:0"
    });

    $(this).html(newElem);
    $.resizeText.increaseSize(10, 0.1, newElem, width, height);

    $(window).resize(function () {
        if ($.resizeText.interval)
            clearTimeout($.resizeText.interval)

        $.resizeText.interval = setTimeout(function () {
            elem.html(elem.find("div.createdResizeObject").first().html());
            elem.resizeText();
        }, 300);
    });
}

$.resizeText = {
    increaseSize: function (increment, start, newElem, width, height) {
        var fontSize = start;

        while (newElem.outerWidth() <= width && newElem.outerHeight() <= height) {
            fontSize += increment;
            newElem.css("font-size", fontSize + "em");
        }

        if (newElem.outerWidth() > width || newElem.outerHeight() > height) {
            fontSize -= increment;
            newElem.css("font-size", fontSize + "em");
            if (increment > 0.1) {
                $.resizeText.increaseSize(increment / 10, fontSize, newElem, width, height);
            }
        }
    }
};

次に、このhtmlがある場合：

<div class="resizeText" style="width:1200px;height:400px;">
Insert text from slipsum here.
</div>

次のように呼び出します：

$(document).ready(function () {
    $(".resizeText").resizeText();
});

それはそれを行うための最良の方法ではありませんが、あなたが続けるには十分です、私は想像します（そしてそれはうまくいきます）。

4
Maverick

これは、与えられた回答のわずかに変更されたバージョンです。

要件：

  1. テキストを含むクラスには「サイズ変更」クラスがあります。
  2. 高さと幅（％、pxなど）が含まれます

このバージョンでの変更点

  1. サイズ変更を追加しました（イベントのサイズ変更を関数にバインドすることにより）autoSizeText。これは理想とはほど遠いですが、あまりサイズを変更しなくても大丈夫です。
  2. 以前のバージョンでは、テキストは小さくなっています。今では、divの外に出ずに最大のフォントを見つけようとします。

注：

私はコードが生産準備ができていると主張しません。しかし、あなたが強化できるものを見つけたら、コミュニティと共有してください。

var autoSizeText = function () {
    var el, elements, _i, _len;
    elements = $('.resize');
    if (elements.length < 0) {
        return;
    }
    for (_i = 0, _len = elements.length; _i < _len; _i++) {
        el = elements[_i];
        dichoFit = function (el) {

            diminishText = function () {
                var elNewFontSize;
                elNewFontSize = (parseInt($(el).css('font-size').slice(0, -2)) - 1) + 'px';

                return $(el).css('font-size', elNewFontSize);
            };
            augmentText = function () {
                var elNewFontSize;
                elNewFontSize = (parseInt($(el).css('font-size').slice(0, -2)) + 1) + 'px';

                return $(el).css('font-size', elNewFontSize);
            };


            diminishText();
            while (el.scrollHeight < el.offsetHeight) {
                augmentText();
            }
            augmentText();
            while (el.scrollHeight > el.offsetHeight) {
                diminishText();
            }

        }
        dichoFit(el);
    }
};

$(document).ready(function () {
    autoSizeText();
    $(window).resize(function resizeText(){
        autoSizeText()
    })
});
.sizable{
 width: 50vw;
 height: 50vh;
 border: 2px solid darkred;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <div class='sizable resize'>
  I am a sizable div and I have explicit width and height.
</div>
3
madjaoue

遅い回答を申し訳ありませんが、多くの人の時間を節約することができます、私はウィンドウのサイズ変更中に完全に動作するこのコードを書きます。

function fitTextInDiv(){
    if($this.find('.text-wrapper').height() > $this.find('.aligned-text').height() ){
        while( $this.find('.text-wrapper').height() > $this.find('.aligned-text').height() ) {
             $this.find('.aligned-text').css('font-size', (parseFloat($this.find('.aligned-text').css('font-size')) + 0.1) + "px" );
        }
    }
    else if($this.find('.text-wrapper').height() < $this.find('.aligned-text').height() ){
        while( $this.find('.text-wrapper').height() < $this.find('.aligned-text').height() ) {
            $this.find('.aligned-text').css('font-size', (parseFloat($this.find('.aligned-text').css('font-size')) - 0.1) + "px" );
        }

     }
}

Text-wrapperは親で、aligned-textは子divです。親要素の高さと幅を指定する必要があります。サイズ変更では、jqueryを使用して親要素の高さと幅を設定し、この関数を呼び出すことができます。

多くのプラグインを試しましたが、ウィンドウのサイズ変更をサポートしていないため、このコードを記述します。

0
Danesh

私は同じ問題を抱えており、解決策は基本的にJavaScriptを使用してフォントサイズを制御することです。 codepenでこの例を確認してください。

https://codepen.io/ThePostModernPlatonic/pen/BZKzVR

サイズを変更してみてください

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sem título</title>
<style>
</style>
</head>
<body>
<div style="height:100vh;background-color: tomato;" id="wrap">        
  <h1 class="quote" id="quotee" style="padding-top: 56px">Because too much "light" doesn't <em>illuminate</em> our paths and warm us, it only blinds and burns us.</h1>
</div>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
  var multiplexador = 3;
  initial_div_height = document.getElementById ("wrap").scrollHeight;
  setInterval(function(){ 
    var div = document.getElementById ("wrap");
    var frase = document.getElementById ("quotee");
    var message = "WIDTH div " + div.scrollWidth + "px. "+ frase.scrollWidth+"px. frase \n";
    message += "HEIGHT div " + initial_div_height + "px. "+ frase.scrollHeight+"px. frase \n";           
    if (frase.scrollHeight < initial_div_height - 30){
      multiplexador += 1;
      $("#quotee").css("font-size", multiplexador); 
    }
    console.log(message);          
  }, 10);
</script>
</html>
0
Heitor Giacomini

これが私のバージョンです。これは、ReactプロジェクトでES6を使用してビルドされます。

export function autoSizeText(container, attempts=30) {
  let setChildrenToInheritFontSize = ( el ) => {
    el.style.fontSize = 'inherit';
    _.each( el.children, (child) => {
      setChildrenToInheritFontSize( child );
    });
  };


  let resizeText = (el) => {
    attempts--;
    let elNewFontSize;
    if( el.style.fontSize === "" ||  el.style.fontSize === "inherit" ||  el.style.fontSize === "NaN" ){
      elNewFontSize = '32px'; // largest font to start with
    } else {
      elNewFontSize = (parseInt(el.style.fontSize.slice(0, -2)) - 1) + 'px';
    }
    el.style.fontSize = elNewFontSize;

    // this function can crash the app, so we need to limit it
    if( attempts <= 0 ) {
      return;
    }

    if ( (el.scrollWidth > el.offsetWidth) || (el.scrollHeight > el.offsetHeight)) {
      resizeText(el);
    }
  };
  setChildrenToInheritFontSize( container );
  resizeText(container);
}
0
Steven Stark

私は最近、テキスト入力フィールドからテキストを受け取る最大幅のdivを持っていたので、そのdivにテキストを合わせる必要があったので、ここでそれを解決しました（シンプルなJS、プラグインなし）：

function addName(){
    let maxWidth = 550;
    let defaultFontSize = 50;
    let entry = document.getElementById('nameInput').value;
    let nameDiv = document.getElementById('name');
    let fontSize = nameDiv.style["font-size"];
    fontSize = fontSize.replace('px','');
    fontSize = parseInt(fontSize);
    nameDiv.innerText = entry;
    if (nameDiv.clientWidth > maxWidth) {
        fontSize = fontSize - 2.5;
        nameDiv.style["font-size"] = `${fontSize}px`;
    } else if (nameDiv.clientWidth < maxWidth && fontSize < defaultFontSize ) {
        fontSize = fontSize + 2.5;
        nameDiv.style["font-size"] = `${fontSize}px`;
    }
}
#name {
    height: 70px;
    line-height: 70px;
    text-align: center;
    overflow: hidden;
    width: auto;
    display: table; /*THAT DOES THE MAGIC*/
    margin: auto;
    border: 1px solid black
/* THE BORDER IS FOR TEST PURPOSES TO SEE WHAT'S HAPPENING WITH THE DIV*/
}
<input type="text" id="nameInput" oninput="addName()">
<div id="name" style="font-size: 50px;"></div>
0
iMac Ange