固定サイズのコンテナを埋めるためのダイナミックテキストの自動サイズ調整
ユーザーが入力したテキストを固定サイズのdivに表示する必要があります。私が欲しいのは、テキストができるだけボックスを埋めるようにフォントサイズを自動的に調整することです。
そのため、divが400px x 300pxの場合誰かがABCに入るなら、それは本当に大きいフォントです。彼らが段落を入力した場合、それは小さなフォントになります。
私はおそらく最大フォントサイズ - おそらく32pxから始めたいと思います、そしてテキストがコンテナに収まるには大きすぎる間、それが収まるまでフォントサイズを縮小します。
ありがとう Attack 。私はjQueryを使いたかった。
あなたは私を正しい方向に向けました、そしてこれが私が終わったものです：
これはプラグインへのリンクです： https://plugins.jquery.com/textfill/
そしてソースへのリンク： http://jquery-textfill.github.io/
;(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 });
});
私のHTMLはこんな感じです
<div class='jtextfill' style='width:100px;height:50px;'>
<span>My Text Here</span>
</div>
これは私の最初のjqueryプラグインなので、おそらくそれがあるべきほど良くはありません。ポインタは大歓迎です。
パフォーマンスが悪いため、これまでの解決策では十分ではないと判断したので、ループではなく単純な数学を使用するようにしました。すべてのブラウザでもうまく動作するはずです。
によると このパフォーマンステストケース それはここにある他の解決策よりはるかに高速です。
(function($) {
$.fn.textfill = function(maxFontSize) {
maxFontSize = parseInt(maxFontSize, 10);
return this.each(function(){
var ourText = $("span", this),
parent = ourText.parent(),
maxHeight = parent.height(),
maxWidth = parent.width(),
fontSize = parseInt(ourText.css("fontSize"), 10),
multiplier = maxWidth/ourText.width(),
newSize = (fontSize*(multiplier-0.1));
ourText.css(
"fontSize",
(maxFontSize > 0 && newSize > maxFontSize) ?
maxFontSize :
newSize
);
});
};
})(jQuery);
あなたが貢献したいのであれば、私は これはGistに を付け加えました。
私がこの答えに対して得る時折の支持を愛する限り（ありがとう！）、これは実際にはこの問題に対する最大のアプローチではありません。ここで他の素晴らしい答え、特にループせずに解決策を見つけたものをチェックしてください。
それでも、参照のために、これが私のオリジナルの答えです：
<html>
<head>
<style type="text/css">
#dynamicDiv
{
background: #CCCCCC;
width: 300px;
height: 100px;
font-size: 64px;
overflow: hidden;
}
</style>
<script type="text/javascript">
function shrink()
{
var textSpan = document.getElementById("dynamicSpan");
var textDiv = document.getElementById("dynamicDiv");
textSpan.style.fontSize = 64;
while(textSpan.offsetHeight > textDiv.offsetHeight)
{
textSpan.style.fontSize = parseInt(textSpan.style.fontSize) - 1;
}
}
</script>
</head>
<body onload="shrink()">
<div id="dynamicDiv"><span id="dynamicSpan">DYNAMIC FONT</span></div>
</body>
</html>
そして、これがクラスのバージョンです。
<html>
<head>
<style type="text/css">
.dynamicDiv
{
background: #CCCCCC;
width: 300px;
height: 100px;
font-size: 64px;
overflow: hidden;
}
</style>
<script type="text/javascript">
function shrink()
{
var textDivs = document.getElementsByClassName("dynamicDiv");
var textDivsLength = textDivs.length;
// Loop through all of the dynamic divs on the page
for(var i=0; i<textDivsLength; i++) {
var textDiv = textDivs[i];
// Loop through all of the dynamic spans within the div
var textSpan = textDiv.getElementsByClassName("dynamicSpan")[0];
// Use the same looping logic as before
textSpan.style.fontSize = 64;
while(textSpan.offsetHeight > textDiv.offsetHeight)
{
textSpan.style.fontSize = parseInt(textSpan.style.fontSize) - 1;
}
}
}
</script>
</head>
<body onload="shrink()">
<div class="dynamicDiv"><span class="dynamicSpan">DYNAMIC FONT</span></div>
<div class="dynamicDiv"><span class="dynamicSpan">ANOTHER DYNAMIC FONT</span></div>
<div class="dynamicDiv"><span class="dynamicSpan">AND YET ANOTHER DYNAMIC FONT</span></div>
</body>
</html>
他の答えの大部分はそれがdivに収まるまでfont-sizeを小さくするためにループを使います、ページがフォントがサイズを変えるたびに要素を再レンダリングする必要があるのでこれはとても遅いです。ユーザブラウザをフリーズさせることなくその内容を定期的に更新することを可能にする方法でそれを実行させるために私は結局私自身のアルゴリズムを書かなければならなかった。私は他の機能（テキストの回転、パディングの追加）を追加し、それをjQueryプラグインとしてパッケージ化しました。
https://github.com/DanielHoffmann/jquery-bigtext
単に電話する
$("#text").bigText();
そしてそれはあなたのコンテナにうまくフィットします。
ここで実際に見てください。
http://danielhoffmann.github.io/jquery-bigtext/
今のところいくつかの制限があります、divは固定の高さと幅を持たなければなりません、そしてそれは複数の行へのテキストの折り返しをサポートしません。
私は最大フォントサイズを設定するオプションを取得することに取り組んでいきます。
編集：私はプラグインにいくつかのより多くの問題を発見した、それは標準的なもの以外の他のボックスモデルを処理しないとdivはマージンやボーダーを持つことができません。私はそれに取り組みます。
編集2：これらの問題と制限を修正し、オプションを追加しました。最大フォントサイズを設定でき、幅、高さ、またはその両方を使用してフォントサイズを制限することもできます。 wrapper要素でmax-widthとmax-heightの値を受け入れるようにしましょう。
編集3：プラグインをバージョン1.2.0に更新しました。コードと新しいオプション（verticalAlign、horizontalAlign、textAlign）の主なクリーンアップと、spanタグ内の内部要素のサポート（改行やフォントの素晴らしいアイコンなど）。
これは、GeekyMonkeyが上記に投稿した内容に基づいており、一部変更が加えられています。
; (function($) {
/**
* Resize inner element to fit the outer element
* @author Some modifications by Sandstrom
* @author Code based on earlier works by Russ Painter ([email protected])
* @version 0.2
*/
$.fn.textfill = function(options) {
options = jQuery.extend({
maxFontSize: null,
minFontSize: 8,
step: 1
}, options);
return this.each(function() {
var innerElements = $(this).children(':visible'),
fontSize = options.maxFontSize || innerElements.css("font-size"), // use current font-size by default
maxHeight = $(this).height(),
maxWidth = $(this).width(),
innerHeight,
innerWidth;
do {
innerElements.css('font-size', fontSize);
// use the combined height of all children, eg. multiple <p> elements.
innerHeight = $.map(innerElements, function(e) {
return $(e).outerHeight();
}).reduce(function(p, c) {
return p + c;
}, 0);
innerWidth = innerElements.outerWidth(); // assumes that all inner elements have the same width
fontSize = fontSize - options.step;
} while ((innerHeight > maxHeight || innerWidth > maxWidth) && fontSize > options.minFontSize);
});
};
})(jQuery);
これは、可能な限り少ないステップで親に収まる最大のサイズを見つけるためにバイナリ検索を使用する、改良されたループ方法です（これは固定フォントサイズでステップするよりも速くて正確です）。コードはパフォーマンスのためにいくつかの方法でも最適化されています。
デフォルトでは、10回の2分探索ステップが実行され、最適サイズの0.1％以内になります。代わりに、numIterをある値Nに設定して、最適サイズの1/2 ^ N以内にすることもできます。
CSSセレクタで呼び出してください。例：fitToParent('.title-span');
/**
* Fit all elements matching a given CSS selector to their parent elements'
* width and height, by adjusting the font-size attribute to be as large as
* possible. Uses binary search.
*/
var fitToParent = function(selector) {
var numIter = 10; // Number of binary search iterations
var regexp = /\d+(\.\d+)?/;
var fontSize = function(elem) {
var match = elem.css('font-size').match(regexp);
var size = match == null ? 16 : parseFloat(match[0]);
return isNaN(size) ? 16 : size;
}
$(selector).each(function() {
var elem = $(this);
var parentWidth = elem.parent().width();
var parentHeight = elem.parent().height();
if (elem.width() > parentWidth || elem.height() > parentHeight) {
var maxSize = fontSize(elem), minSize = 0.1;
for (var i = 0; i < numIter; i++) {
var currSize = (minSize + maxSize) / 2;
elem.css('font-size', currSize);
if (elem.width() > parentWidth || elem.height() > parentHeight) {
maxSize = currSize;
} else {
minSize = currSize;
}
}
elem.css('font-size', minSize);
}
});
};
私はAngularJS用のディレクティブを作成しました - GeekyMonkeyの答えに強く触発されましたが、jQueryに依存しません。
デモ：http://plnkr.co/edit/8tPCZIjvO3VSApSeTtYr?p=preview
マークアップ
<div class="fittext" max-font-size="50" text="Your text goes here..."></div>
指令
app.directive('fittext', function() {
return {
scope: {
minFontSize: '@',
maxFontSize: '@',
text: '='
},
restrict: 'C',
transclude: true,
template: '<div ng-transclude class="textContainer" ng-bind="text"></div>',
controller: function($scope, $element, $attrs) {
var fontSize = $scope.maxFontSize || 50;
var minFontSize = $scope.minFontSize || 8;
// text container
var textContainer = $element[0].querySelector('.textContainer');
angular.element(textContainer).css('Word-wrap', 'break-Word');
// max dimensions for text container
var maxHeight = $element[0].offsetHeight;
var maxWidth = $element[0].offsetWidth;
var textContainerHeight;
var textContainerWidth;
var resizeText = function(){
do {
// set new font size and determine resulting dimensions
textContainer.style.fontSize = fontSize + 'px';
textContainerHeight = textContainer.offsetHeight;
textContainerWidth = textContainer.offsetWidth;
// shrink font size
var ratioHeight = Math.floor(textContainerHeight / maxHeight);
var ratioWidth = Math.floor(textContainerWidth / maxWidth);
var shrinkFactor = ratioHeight > ratioWidth ? ratioHeight : ratioWidth;
fontSize -= shrinkFactor;
} while ((textContainerHeight > maxHeight || textContainerWidth > maxWidth) && fontSize > minFontSize);
};
// watch for changes to text
$scope.$watch('text', function(newText, oldText){
if(newText === undefined) return;
// text was deleted
if(oldText !== undefined && newText.length < oldText.length){
fontSize = $scope.maxFontSize;
}
resizeText();
});
}
};
});
私はMarcus Ekwallから上記のスクリプトを分岐させました： https://Gist.github.com/3945316 そして私の好みに合わせてそれを微調整しました、それはウィンドウがリサイズされた時に起動します。 。参考のために以下のスクリプトを貼り付けました。
(function($) {
$.fn.textfill = function(maxFontSize) {
maxFontSize = parseInt(maxFontSize, 10);
return this.each(function(){
var ourText = $("span", this);
function resizefont(){
var parent = ourText.parent(),
maxHeight = parent.height(),
maxWidth = parent.width(),
fontSize = parseInt(ourText.css("fontSize"), 10),
multiplier = maxWidth/ourText.width(),
newSize = (fontSize*(multiplier));
ourText.css("fontSize", maxFontSize > 0 && newSize > maxFontSize ? maxFontSize : newSize );
}
$(window).resize(function(){
resizefont();
});
resizefont();
});
};
})(jQuery);
これが私のOPの答えの修正です。
要するに、これを最適化しようとした多くの人々は、ループが使用されていると不満を述べました。はい、ループは遅くなる可能性がありますが、他のアプローチは不正確になる可能性があります。
したがって、私のアプローチではバイナリサーチを使って最良のフォントサイズを見つけます。
$.fn.textfill = function()
{
var self = $(this);
var parent = self.parent();
var attr = self.attr('max-font-size');
var maxFontSize = parseInt(attr, 10);
var unit = attr.replace(maxFontSize, "");
var minFontSize = parseInt(self.attr('min-font-size').replace(unit, ""));
var fontSize = (maxFontSize + minFontSize) / 2;
var maxHeight = parent.height();
var maxWidth = parent.width();
var textHeight;
var textWidth;
do
{
self.css('font-size', fontSize + unit);
textHeight = self.height();
textWidth = self.width();
if(textHeight > maxHeight || textWidth > maxWidth)
{
maxFontSize = fontSize;
fontSize = Math.floor((fontSize + minFontSize) / 2);
}
else if(textHeight < maxHeight || textWidth < maxWidth)
{
minFontSize = fontSize;
fontSize = Math.floor((fontSize + maxFontSize) / 2);
}
else
break;
}
while(maxFontSize - minFontSize > 1 && maxFontSize > minFontSize);
self.css('font-size', fontSize + unit);
return this;
}
function resizeText()
{
$(".textfill").textfill();
}
$(document).ready(resizeText);
$(window).resize(resizeText);
これにより、要素は最小フォントと最大フォントを指定できます。
<div class="container">
<div class="textfill" min-font-size="10px" max-font-size="72px">
Text that will fill the container, to the best of its abilities, and it will <i>never</i> have overflow.
</div>
</div>
さらに、このアルゴリズムは無単位です。あなたはem、rem、%などを指定することができます、そしてそれは最終的な結果のためにそれを使います。
これがフィドルです。 https://jsfiddle.net/fkhqhnqe/1/
私は私のウェブサイトと全く同じ問題を抱えていました。プロジェクター、壁、大画面に表示されるページがあります。
フォントの最大サイズがわからないので、@GeekMonkeyの上記のプラグインを再利用しましたが、fontsizeをインクリメントしました。
$.fn.textfill = function(options) {
var defaults = { innerTag: 'span', padding: '10' };
var Opts = jQuery.extend(defaults, options);
return this.each(function() {
var ourText = $(Opts.innerTag + ':visible:first', this);
var fontSize = parseFloat(ourText.css('font-size'),10);
var doNotTrepass = $(this).height()-2*Opts.padding ;
var textHeight;
do {
ourText.css('font-size', fontSize);
textHeight = ourText.height();
fontSize = fontSize + 2;
} while (textHeight < doNotTrepass );
});
};
提案されている反復解は、2つの面で劇的にスピードアップすることができます。
1）1を足したり引いたりするのではなく、フォントサイズに定数を掛けます。
2）最初に、コース定数の使用をゼロにします。たとえば、各ループのサイズを2倍にします。それから、どこから始めるべきかの大まかな考えで、より細かい調整で同じことをしてください、例えば、1.1を掛けてください。完璧主義者は理想的なフォントの正確な整数ピクセルサイズを望んでいるかもしれませんが、ほとんどの観察者は100から110ピクセルの間の違いに気付きません。あなたが完璧主義者なら、さらに細かい調整をして3回目を繰り返します。
正確な質問に答えるための特定のルーチンやプラグインを書くのではなく、基本的なアイデアに頼って、フィッティングdiv、スパン、イメージなど、テキストだけでなくあらゆる種類のレイアウトの問題を処理するコードのバリエーションを書きます。 ..コンテナ内の幅、高さ、面積などによって、他の要素と一致する.
これが例です：
var nWindowH_px = jQuery(window).height();
var nWas = 0;
var nTry = 5;
do{
nWas = nTry;
nTry *= 2;
jQuery('#divTitle').css('font-size' ,nTry +'px');
}while( jQuery('#divTitle').height() < nWindowH_px );
nTry = nWas;
do{
nWas = nTry;
nTry = Math.floor( nTry * 1.1 );
jQuery('#divTitle').css('font-size' ,nTry +'px');
}while( nWas != nTry && jQuery('#divTitle').height() < nWindowH_px );
jQuery('#divTitle').css('font-size' ,nWas +'px');
この問題を解決するには、FitText.js（ github page ）を使用します。 TextFillと比べて本当に小さくて効率的です。 TextFillは高価なwhileループを使い、FitTextは使いません。
またFitTextはより柔軟です（私は非常に特別な要件を持つproyectでそれを使い、チャンピオンのように働きます！）.
HTML：
<div class="container">
<h1 id="responsive_headline">Your fancy title</h1>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.fittext.js"></script>
<script>
jQuery("#responsive_headline").fitText();
</script>
オプションを設定することもできます。
<script>
jQuery("#responsive_headline").fitText(1, { minFontSize: '30px', maxFontSize: '90px'});
</script>
CSS：
#responsive_headline {
width: 100%;
display: block;
}
そしてもしあなたがそれを必要としているなら、FitTextは jQueryなしのバージョン も持っています。
これはminFontSizeパラメータを取ることができる受け入れられた答えのバージョンです。
(function($) {
/**
* Resizes an inner element's font so that the inner element completely fills the outer element.
* @author Russ Painter [email protected]
* @author Blake Robertson
* @version 0.2 -- Modified it so a min font parameter can be specified.
*
* @param {Object} Options which are maxFontPixels (default=40), innerTag (default='span')
* @return All outer elements processed
* @example <div class='mybigdiv filltext'><span>My Text To Resize</span></div>
*/
$.fn.textfill = function(options) {
var defaults = {
maxFontPixels: 40,
minFontPixels: 10,
innerTag: 'span'
};
var Opts = jQuery.extend(defaults, options);
return this.each(function() {
var fontSize = Opts.maxFontPixels;
var ourText = $(Opts.innerTag + ':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 > Opts.minFontPixels);
});
};
})(jQuery);
編集：このコードは、HTML5ビデオの上にメモを表示するために使用されていました。ビデオがリサイズされると（ブラウザウィンドウがリサイズされると）、フォントサイズがその場で変更されます。メモは（YouTubeのメモと同じように）ビデオに関連付けられているので、コードはDOMハンドルの代わりにインスタンスを使用します。直接。
要求に応じて、これを達成するために使用していたコードをいくつか投入します。 （HTML5ビデオの上のテキストボックス。）コードはずっと前に書かれていて、そしてそれはかなり率直に言ってかなり厄介だと思います。質問はすでに回答されており、回答はすでにかなり前に受け入れられているので、これを書き直す必要はありません。しかし、誰かがこれを少し簡単にしたいのなら、あなたは大歓迎です！
// Figure out the text size:
var text = val['text'];
var letters = text.length;
var findMultiplier = function(x) { // g(x)
/* By analysing some functions with regression, the resulting function that
gives the best font size with respect to the number of letters and the size
of the note is:
g(x) = 8.3 - 2.75x^0.15 [1 < x < 255]
f(x) = g(letters) * (x / 1000)^0.5
Font size = f(size)
*/
return 8.3 - 2.75 * Math.pow(x, 0.15);
};
var findFontSize = function(x) { // f(x)
return findMultiplier(letters) * Math.pow(x / 1000, 0.5);
};
val.setFontSizeListener = function() {
p.style.fontSize = '1px'; // So the text should not overflow the box when measuring.
var noteStyle = window.getComputedStyle(table);
var width = noteStyle.getPropertyValue('width');
var height = noteStyle.getPropertyValue('height');
var size = width.substring(0, width.length - 2) * height.substring(0, height.length - 2);
p.style.fontSize = findFontSize(size) + 'px';
};
window.addEventListener('resize', val.setFontSizeListener);
おそらくこれらの数字をfont-familyからfont-familyに微調整する必要があるでしょう。これを行う良い方法は、GeoGebraと呼ばれる無料のグラフビジュアライザーをダウンロードすることです。テキストの長さとボックスのサイズを変更します。それから手動でサイズを設定します。手動結果を座標系にプロットします。それからあなたは私がここに投稿した2つの方程式を入力し、そして "私の"グラフがあなた自身の手動でプロットされた点に合うまであなたは数を微調整します。
私はこれがオールディーズであることを知っています、しかしこの機能性を必要とする人々がまだそこにいます。私はgeekMonkeyのソリューションを使いましたが、その衝撃を受けました。それは遅いからです。彼がしていることは、フォントサイズを最大（maxFontPixels）に調整してから、それがコンテナ内に収まるかどうかをチェックすることです。それ以外の場合は、フォントサイズを1px縮小して再度確認します。単に前のコンテナの高さをチェックしてその値を送信しないのはなぜですか。 （ええ、私はその理由を知っています、しかし私は今解決策を作りました、それは高さだけで働き、そしてまた最小/最大オプションを持っています）
より迅速な解決方法：
var index_letters_resize;
(index_letters_resize = function() {
$(".textfill").each(function() {
var
$this = $(this),
height = Math.min( Math.max( parseInt( $this.height() ), 40 ), 150 );
$this.find(".size-adjust").css({
fontSize: height
});
});
}).call();
$(window).on('resize', function() {
index_letters_resize();
);
これはHTMLになります。
<div class="textfill">
<span class="size-adjust">adjusted element</span>
other variable stuff that defines the container size
</div>
繰り返しますが、この解決策はコンテナの高さだけをチェックします。要素が内側に収まるかどうか、この関数がチェックする必要がないのはそのためです。しかし、私はまた最小/最大値（40分、150最大）を実装したので、私にとってこれは完全にうまく機能します（そしてまたウィンドウのサイズ変更でも機能します）。
テキストを縮小するためにループを使用しないようにする方法を見つけました。フォント幅をコンテナーの幅とコンテンツの幅の間の比率に掛けて調整します。したがって、コンテナの幅がコンテンツの1/3の場合、フォントサイズは1/3縮小され、コンテナの幅になります。スケールアップするために、コンテンツがコンテナより大きくなるまで、whileループを使いました。
function fitText(outputSelector){
// max font size in pixels
const maxFontSize = 50;
// get the DOM output element by its selector
let outputDiv = document.getElementById(outputSelector);
// get element's width
let width = outputDiv.clientWidth;
// get content's width
let contentWidth = outputDiv.scrollWidth;
// get fontSize
let fontSize = parseInt(window.getComputedStyle(outputDiv, null).getPropertyValue('font-size'),10);
// if content's width is bigger than elements width - overflow
if (contentWidth > width){
fontSize = Math.ceil(fontSize * width/contentWidth,10);
fontSize = fontSize > maxFontSize ? fontSize = maxFontSize : fontSize - 1;
outputDiv.style.fontSize = fontSize+'px';
}else{
// content is smaller than width... let's resize in 1 px until it fits
while (contentWidth === width && fontSize < maxFontSize){
fontSize = Math.ceil(fontSize) + 1;
fontSize = fontSize > maxFontSize ? fontSize = maxFontSize : fontSize;
outputDiv.style.fontSize = fontSize+'px';
// update widths
width = outputDiv.clientWidth;
contentWidth = outputDiv.scrollWidth;
if (contentWidth > width){
outputDiv.style.fontSize = fontSize-1+'px';
}
}
}
}
このコードは私がGithubにアップロードしたテストの一部です https://github.com/ricardobrg/fitText/
私のバージョンのコンテンツを追加したいだけでした。
$.fn.fitInText = function() {
this.each(function() {
let textbox = $(this);
let textboxNode = this;
let mutationCallback = function(mutationsList, observer) {
if (observer) {
observer.disconnect();
}
textbox.css('font-size', 0);
let desiredHeight = textbox.css('height');
for (i = 12; i < 50; i++) {
textbox.css('font-size', i);
if (textbox.css('height') > desiredHeight) {
textbox.css('font-size', i - 1);
break;
}
}
var config = {
attributes: true,
childList: true,
subtree: true,
characterData: true
};
let newobserver = new MutationObserver(mutationCallback);
newobserver.observe(textboxNode, config);
};
mutationCallback();
});
}
$('#inner').fitInText();#outer {
display: table;
width: 100%;
}
#inner {
border: 1px solid black;
height: 170px;
text-align: center;
display: table-cell;
vertical-align: middle;
Word-break: break-all;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="outer">
<div id="inner" contenteditable=true>
TEST
</div>
</div>私は同じ問題を抱えており、解決策は基本的にフォントサイズを制御するために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>
私は好きでした
let name = "Making statements based on opinion; back them up with references or personal experience."
let originFontSize = 15;
let maxDisplayCharInLine = 50;
let fontSize = Math.min(originFontSize, originFontSize / (name.length / maxDisplayCharInLine));