web-dev-qa-db-ja.com

div内のテキストサイズを自動的に変更する方法は？

divの背景画像があります。テキストを書きたいのですが、このテキストはdivを介してフォントサイズを変更する必要があります。

jqueryhtmlcssfont-size
20
useCase

私はあなたの質問をこのように理解しています。一定のサイズの特定のdivにテキストを合わせたいと思います.divが小さすぎてすべてのテキストを表示できない場合は、テキストがdivに収まるまでフォントサイズを縮小する必要があります。それがポイントなら、ここに私の解決策があります。

JQueryを実装した例を次に示します。 http://jsfiddle.net/MYSVL/2/

ここにdivがあります

<div id="fitin">
    <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
</div>

固定サイズで

#fitin {
    width: 300px;
    height: 100px;
    border: 1px solid black;
    overflow: hidden;
    font-size: 1em;
}

このJavaScriptが仕事をします。

$(function() {
    while( $('#fitin div').height() > $('#fitin').height() ) {
        $('#fitin div').css('font-size', (parseInt($('#fitin div').css('font-size')) - 1) + "px" );
    }
});
52
DanielB

FlowType.jsはそれを行います：divであろうと他の要素タイプであろうと、境界要素に一致するようにフォントのサイズを変更します。

FlowTypeの実装例：

  1. スタイルを設定する

    body {
font-size: 18px;
line-height: 26px;
}

  2. GitHubからFlowTypeをダウンロードする そして、それへの参照をhead要素に含めます

    flowtype.jQuery.js

  3. 呼び出しFlowType

    $('body').flowtype();

  4. （オプション）デフォルト設定を更新する

    $('body').flowtype({
minimum   : 500,
maximum   : 1200,
minFont   : 12,
maxFont   : 40,
fontRatio : 30,
lineRatio : 1.45
});

彼らのホームページ インタラクティブなデモをご覧ください

6
jdhurst

私はあなたの質問を完全に理解しているわけではありませんが、あなたが求めているのは、事前に定義されたサイズの特定のコンテナにテキストを収める方法だと思います。この質問に答えようとします。

クライアント側

クライアントでオンデマンドでこれを行うには、Javascriptを実行する必要があります。アイデアは次のとおりです。

  1. 非表示のdivを生成し、そのスタイルを次のように設定します。

    position: absolute;
top: 0;
left: 0;
width: auto;
height: auto;
display: block;
visibility: hidden;
font-family: /* as per your original DIV */
font-size: /* as per your original DIV */
white-space: /* as per your original DIV */

  2. テキストをコピーします

  3. dIVの幅が元のDIVのサイズを超えているかどうかを確認します。

  4. 調整font-size値は、単純にインクリメント/デクリメントするのではなく、非表示のDIVと元のDIVの幅の差を計算することによって。これにより、サイズの修正がはるかに速くなります。

  5. ステップに進みます。

サーバ側

サーバーにフォントサイズを設定する信頼できる方法はないため、クライアントレンダリングコンテナーに適合します。残念ながら、事前にテストされた経験的データのサイズのみを概算できます。

1
Robert Koritnik

質問は長い間回答されてきましたが、メモを追加したいと思います。

以来、追加のjQueryプラグインがユニバースに追加されました：FlowType.js

https://github.com/simplefocus/FlowType.JS

与えられたソリューションとプラグイン（FlowType.JSを含む）を試してみましたが、最終的には自分で作成しました。ここに「インスピレーション」として含めるだけです。別のアプローチを使用します。テキストのサイズが親よりも大きい比率を計算します。意味があるかどうかはわかりませんが、私にとってはうまく機能します。

    /* shrinkText jQuery Plugin  */

(function( $ ){

  $.fn.shrinkText = function() {

    var $_me = this;
    var $_parent = $_me.parent();

    var int_my_width = $_me.width();
    var int_parent_width = $_parent.width();

    if ( int_my_width > int_parent_width ){

      rl_ratio =   int_parent_width / int_my_width;

      var int_my_fontSize = $_me.css("font-size").replace(/[^-\d\.]/g, '');

      int_my_fontSize = Math.floor(int_my_fontSize * rl_ratio);

      $_me.css("font-size", int_my_fontSize + "px");

    }
  };

})( jQuery );

ブロックレベル要素内のインライン要素を想定し、font-sizeを再計算してインライン要素を縮小します。

HTML：

<h1 style="white-space:nowrap;">
  <a href="#" >Macrobenthos of the North Sea - Miscellaneous worms</a>
</h1>

JavaScript：

if( jQuery().shrinkText ){
    $("#title a").shrinkText();
}
1
Ideogram

画像の幅と高さを取得するには、画像をプリロードする必要があります。

サイズが決まり次第、さまざまなフォントサイズを「試して」ください。

$("<img/>").appendTo(document.body).attr('src','myBackground.png').load(function(){
    var width = $(this).width(), height = $(this).height(),
        $div = $("#myDivId"),
        font = 30;

    do{
      font--;
      $div.css('font-size',font);
    }while($div.width()>width || $div.height()>height || font == 0);

    $div.width(width);
    $div.height(height);
});
0
jantimon

ここでこの例を確認してください http://codepen.io/LukeXF/pen/yOQWNb 、ページの読み込みとページのサイズ変更で簡単な関数を使用して魔法を実現できます。

function resize() {  
    $('.resize').each(function(i, obj) {
        $(this).css('font-size', '8em');

        while ($(this).width() > $(this).parent().width()) {
            $(this).css('font-size', (parseInt($(this).css('font-size')) - 1) + "px");
        }
    });
}
0
Luke Brown

@DanielBコードのより良いバージョンを作成しました。誰かの時間を節約できるかもしれません:)

（変更したいdivにRESIZABLEクラスを追加するだけです）

$(document).ready(function() {
    $(window).resize(function() {

        $('.RESIZABLE').each(function(i, obj) {
            $(this).css('font-size', '8em');

            while ($(this).width() > $(this).parent().width()) {
                $(this).css('font-size', (parseInt($(this).css('font-size')) - 1) + "px");
            }
        });






    });
});
0
Adacho

ブロックサイズを定義するためのJQueryおよびHTML5データアノテーションを使用したグローバル関数を以下に示します。

なぜテーブルが必要なのか聞かないでください:-)、幅関数はテーブルで最適に動作します...

使用法 ：

<table>
 <tr>
    <td class="caa" data-text-max-width="500" data-text-max-height="80">
       The Text is Here
    </td>
 </tr>
</table>

追加する機能：

$(function () {
    var textConsts = {
        MIN_SIZE_OF_A_TEXT: 9
    };

    $('*[data-text-max-width]').each(function () {

        var textMaxWidth = $(this).data("text-max-width");
        var textMaxHeight = $(this).data("text-max-height");
        var minSizeOfaText = $(this).data("text-min-size");

        $(this).css('font-size', '9em');

        if (minSizeOfaText == null || !($(this).hasData("text-min-size")))
            minSizeOfaText = textConsts.MIN_SIZE_OF_A_TEXT;

        if (textMaxWidth == null || !($(this).hasData("text-max-width")))
            textMaxWidth = $(this).parent().width();

        if (textMaxHeight == null || !($(this).hasData("text-max-height")))
            textMaxHeight = $(this).parent().height();

        var curentWidth = $(this).width();
        var curentFontSize = 0;
        var numberOfRounds = 0;
        var currentHeigth = $(this).height();
        curentFontSize = parseInt($(this).css('font-size'));
        var lineHeigth = parseInt($(this).css('line-height'));
        if (currentHeigth > (curentFontSize * lineHeigth)) {
            curentWidth += curentFontSize * lineHeigth;
        }

        while (curentWidth > textMaxWidth || currentHeigth > textMaxHeight) {

            curentFontSize = parseInt($(this).css('font-size'));
            curentFontSize -= 1;

            $(this).css('font-size', curentFontSize + "px");

            curentWidth = $(this).width();
            currentHeigth = $(this).height();

            if (currentHeigth > (curentFontSize * 1.5))
                curentWidth += curentFontSize * 1.5;

            numberOfRounds += 1;

            if (numberOfRounds > 1000)
                break;

            if (curentFontSize <= minSizeOfaText)
                break;
        }

        $(this).css('height', textMaxHeight + "px");
        $(this).css('width', textMaxWidth + "px");
    });

});
0
OBender

Div内に複雑なHTMLがあり、異なる要素間の比率を維持したい場合に、DanielBソリューションを拡張します。

$(function() {
    $(window).on('resize', function() {
        $('#fitin').css('font-size', '1em');
        var count = 0;
        while( count< 30 && $('#fitin').height() > $('#fitin div').height() ) { 
            $('#fitin *').each(function( index ) {
                $(this).css('font-size',(parseInt($(this).css('font-size')) + 1) + "px");
            });
            count++;
        } 
        count = 0;
        while( count< 30 && $('#fitin div').height() > $('#fitin').height()-20 ) {
            $('#fitin *').each(function( index ) {
                $(this).css('font-size',(parseInt($(this).css('font-size')) - 1) + "px");
            })
            count++;
        }
    });
    $(window).trigger('resize');  
});
0
Renzo Ciot