Automatyczny rozmiar dynamicznego tekstu do wypełnienia kontenera o stałym rozmiarze
Muszę wyświetlić wprowadzony przez użytkownika tekst w div o stałym rozmiarze. Chcę, aby rozmiar czcionki był automatycznie dostosowywany, aby tekst wypełniał pole tak bardzo, jak to możliwe.
Więc-jeśli div wynosi 400px x 300px. Jak ktoś wejdzie do ABC to jest naprawdę duża czcionka. Jeśli wprowadzą akapit, będzie to mała czcionka.
Prawdopodobnie chciałbym zacząć od maksymalnego rozmiaru czcionki-może 32px, i chociaż tekst jest zbyt duży, aby pasował do kontenera, zmniejsz rozmiar czcionki, aż pasuje.
18 answers
Thanks Attack . Chciałem użyć jQuery.
Wskazałeś mnie we właściwym kierunku, i tak właśnie skończyłem:
Oto link do wtyczki: https://plugins.jquery.com/textfill/
Oraz link do źródła: 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 });
});
A mój html jest taki
<div class='jtextfill' style='width:100px;height:50px;'>
<span>My Text Here</span>
</div>
To mój pierwszy plugin jquery, więc prawdopodobnie nie jest tak dobry, jak powinien być. Wskazówki są mile widziane.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 11:54:53
Nie znalazłem żadnego z poprzednich rozwiązań, które byłyby wystarczająco odpowiednie z powodu złej wydajności, więc stworzyłem własne, które używa prostej matematyki zamiast pętli. Powinien działać dobrze we wszystkich przeglądarkach, jak również.
Zgodnie z ten test wydajności jest znacznie szybszy niż inne rozwiązania tutaj znalezione.
(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);
Jeśli chcesz się przyczynić dodałem to do Gist .
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-11-01 10:58:13
Większość innych odpowiedzi używa pętli, aby zmniejszyć rozmiar czcionki, dopóki nie zmieści się w div, jest to bardzo powolne, ponieważ strona musi ponownie renderować element za każdym razem, gdy czcionka zmienia rozmiar. W końcu musiałem napisać własny algorytm, aby działał w sposób, który pozwolił mi okresowo aktualizować jego zawartość bez zamrażania przeglądarki użytkownika. Dodałem kilka innych funkcjonalności (obracanie tekstu, Dodawanie paddingu) i zapakowałem go jako wtyczkę jQuery, można go dostać at:
Https://github.com/DanielHoffmann/jquery-bigtext
Po Prostu zadzwoń
$("#text").bigText();
I będzie dobrze pasował do twojego pojemnika.
Zobacz go w akcji tutaj:
Http://danielhoffmann.github.io/jquery-bigtext/
Na razie ma pewne ograniczenia, div musi mieć stałą wysokość i szerokość i nie obsługuje zawijania tekstu w wiele wierszy.
Będę pracował nad uzyskaniem opcji ustawienia maksymalnej wielkości czcionki.
Edytuj: Znalazłem jeszcze kilka problemów z wtyczką, nie obsługuje ona innych modeli pudełkowych poza standardowym i div nie może mieć marginesów ani granic. Popracuję nad tym.
Edit2: naprawiłem te problemy i ograniczenia oraz dodałem więcej opcji. Możesz ustawić maksymalny rozmiar czcionki, a także ograniczyć rozmiar czcionki za pomocą szerokości, wysokości lub obu. Będę pracować nad zaakceptowaniem wartości max-width i max-height w elemencie owijarki.
Edit3: zaktualizowałem plugin do wersji 1.2.0. Główne oczyszczenie kodu i nowe opcje (verticalAlign, horizontalAlign, textAlign) oraz wsparcie dla elementów wewnętrznych wewnątrz znacznika span (takich jak podziały linii lub ikony Font-awesome.)Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-07-27 17:29:29
Jak bardzo kocham okazjonalne upvotes dostaję za tę odpowiedź (dzięki!), to naprawdę nie jest najlepsze podejście do tego problemu. Sprawdź tutaj inne wspaniałe odpowiedzi, zwłaszcza te, które znalazły rozwiązania bez zapętlania.
Mimo wszystko, dla przypomnienia, oto moja oryginalna ODPOWIEDŹ :
<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>
A oto wersja z klasami :
<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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-08-09 05:22:52
Jest to oparte na tym, co geekymonkey opublikował powyżej, z pewnymi modyfikacjami.
; (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);
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-03-01 00:16:26
Stworzyłem dyrektywę dla AngularJS-bardzo zainspirowany odpowiedzią GeekyMonkey, ale bez zależności od jQuery.
Demo: http://plnkr.co/edit/8tPCZIjvO3VSApSeTtYr?p=preview
Znaczniki
<div class="fittext" max-font-size="50" text="Your text goes here..."></div>
Dyrektywa
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();
});
}
};
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-08-15 08:12:38
Oto ulepszona metoda zapętlania, która wykorzystuje wyszukiwanie binarne, aby znaleźć największy możliwy rozmiar, który pasuje do rodzica w jak najmniejszej liczbie możliwych kroków (jest to szybsze i dokładniejsze niż przechodzenie przez stały rozmiar czcionki). Kod jest również zoptymalizowany pod kątem wydajności na kilka sposobów.
Domyślnie zostanie wykonanych 10 binarnych kroków wyszukiwania, które osiągną 0,1% optymalnego rozmiaru. Można zamiast tego ustawić numIter na jakąś wartość N, aby uzyskać w granicach 1/2^N optymalnej rozmiar.
Wywołaj za pomocą selektora CSS, np.: 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);
}
});
};
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-07-07 21:34:42
Rozszyfrowałem powyższy skrypt od Marcusa Ekwalla: https://gist.github.com/3945316 i dostosowałem go do moich preferencji, teraz uruchamia się po zmianie rozmiaru okna, tak aby dziecko zawsze pasowało do swojego kontenera. Wkleiłem poniższy skrypt w celach informacyjnych.
(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);
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-08-19 06:19:17
Oto moja modyfikacja odpowiedzi po.
Krótko mówiąc, wiele osób, które próbowały to zoptymalizować, skarżyło się, że używana jest pętla. Tak, Podczas gdy pętle mogą być powolne, inne podejścia mogą być niedokładne.
Dlatego moje podejście wykorzystuje Wyszukiwanie binarne , aby znaleźć najlepszy rozmiar czcionki:
$.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);
To również pozwala elementowi określić minimalną i maksymalną czcionkę:
<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>
Ponadto algorytm ten jest bez jednostek. Możesz określić em, rem, %, itd. i wykorzysta to do ostatecznego wyniku.
Oto Skrzypce: https://jsfiddle.net/fkhqhnqe/1/
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-02-15 23:22:41
Miałem dokładnie ten sam problem z moją stroną internetową. Mam stronę, która jest wyświetlana na projektorze, na ścianach, dużych ekranach..
Ponieważ nie znam maksymalnego rozmiaru mojej czcionki, ponownie użyłem wtyczki powyżej @ GeekMonkey, ale zwiększając wielkość czcionki:
$.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 );
});
};
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-03-21 15:12:25
Oto wersja zaakceptowanej odpowiedzi, która może również przyjmować parametr 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);
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-03-08 19:43:46
Możesz użyć FitText.js (github page ), aby rozwiązać ten problem. Jest naprawdę mały i wydajny w porównaniu do TextFill. TextFill używa drogiej pętli while, a FitText nie.
Również FitText jest bardziej elastyczny (używam go w proyeccie o bardzo specjalnych wymaganiach i działa jak mistrz!).
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>
Możesz również ustawić na nim opcje:
<script>
jQuery("#responsive_headline").fitText(1, { minFontSize: '30px', maxFontSize: '90px'});
</script>
CSS:
#responsive_headline {
width: 100%;
display: block;
}
I jeśli tego potrzebujesz, FitText ma również no-jQuery wersja .
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-09-20 08:07:44
EDIT: ten kod był używany do wyświetlania notatek na wideo HTML5. Zmienia rozmiar czcionki w locie, gdy wideo jest zmieniany rozmiar (gdy okno przeglądarki jest zmieniany rozmiar.) Notatki zostały połączone z filmem (podobnie jak notatki na YouTube), dlatego kod używa instancji zamiast uchwytu DOM bezpośrednio.
Zgodnie z życzeniem dorzucę jakiś kod, którego użyłem, aby to osiągnąć. (Pola tekstowe nad wideo HTML5.) Kod został napisany dawno temu i szczerze mówiąc uważam, że jest ładny bałagan. Ponieważ pytanie jest już odpowiedział i odpowiedź jest już przyjęta dawno temu nie zawracam sobie głowy przepisywanie tego. Ale jeśli ktoś chce to nieco uprościć, jesteś bardziej niż mile widziany!
// 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);
Prawdopodobnie będziesz musiał dostosować te liczby z font-family Do font-family. Dobrym sposobem na to jest pobranie darmowego wizualizera wykresu o nazwie GeoGebra. Zmień długość tekstu i rozmiar pola. Następnie ręcznie ustawiasz rozmiar. Wykreśl wyniki ręczne na współrzędnej system. Następnie wpisujesz dwa równania, które tu napisałem i poprawiasz liczby, aż" mój " wykres pasuje do własnych ręcznie wykreślonych punktów.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-01-21 19:05:05
Proponowane rozwiązania iteracyjne można radykalnie przyspieszyć na dwóch frontach:
1) pomnóż rozmiar czcionki przez jakąś stałą, zamiast dodawać lub odejmować 1.
2) Po pierwsze, zero w użyciu stałej kursu, powiedzmy, podwoić rozmiar każdej pętli. Następnie, z przybliżonym pomysłem, od czego zacząć, zrób to samo z dokładniejszą regulacją, powiedzmy, pomnóż przez 1.1. Podczas gdy perfekcjonista może chcieć dokładnej wielkości piksela idealnej czcionki, większość obserwatorów nie zauważa różnicy od 100 do 110 pikseli. Jeśli jesteś perfekcjonistą, powtórz trzeci raz z jeszcze drobniejszą regulacją.
Zamiast pisać konkretną rutynę lub wtyczkę, która odpowiada na dokładne pytanie, po prostu polegam na podstawowych pomysłach i piszę wariacje kodu, aby poradzić sobie z wszelkiego rodzaju problemami układu, a nie tylko tekstem, w tym dopasowaniem div, przęseł, obrazów... według szerokości, wysokości, powierzchni,... wewnątrz kontenera, dopasowując inny element....
Oto przykład:
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');
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-11-17 18:49:36
Wiem, że ten jest stary, ale wciąż są ludzie, którzy potrzebują tej funkcjonalności. poszedłem z rozwiązaniem geekMonkey, ale jego walnięcie. po prostu dlatego, że jest powolny. to, co robi, to dostosowuje rozmiar czcionki do maksimum (maxFontPixels), a następnie sprawdza, czy mieści się wewnątrz kontenera. w przeciwnym razie zmniejsza rozmiar czcionki o 1px i sprawdza ponownie. dlaczego po prostu nie sprawdzić wysokości poprzedniego kontenera i przesłać tę wartość?? (tak, Wiem dlaczego, ale teraz zrobiłem rozwiązanie, które działa tylko na wysokości, a także posiada opcję min / max)
O wiele szybsze rozwiązanie:
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();
);
A to byłby HTML:
<div class="textfill">
<span class="size-adjust">adjusted element</span>
other variable stuff that defines the container size
</div>
Ponownie: To rozwiązanie sprawdza tylko wysokość pojemnika. dlatego funkcja ta nie musi sprawdzać, czy element pasuje do wnętrza. ale zaimplementowałem również wartość min / max (40min, 150max), więc dla mnie działa to doskonale (a także działa na zmianę rozmiaru okna).
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-02-23 14:19:11
Mam ten sam problem i rozwiązaniem jest użycie javascript do kontrolowania rozmiaru czcionki. Sprawdź ten przykład na codepen:
Https://codepen.io/ThePostModernPlatonic/pen/BZKzVR
To jest przykład jest tylko dla wysokości, może trzeba umieścić kilka jeśli jest o szerokości.
Spróbuj zmienić rozmiar
<!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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-09-25 15:15:58
I did like
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));
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-04-16 08:35:26
Oto inna wersja tego rozwiązania:
shrinkTextInElement : function(el, minFontSizePx) {
if(!minFontSizePx) {
minFontSizePx = 5;
}
while(el.offsetWidth > el.parentNode.offsetWidth || el.offsetHeight > el.parentNode.offsetHeight) {
var newFontSize = (parseInt(el.style.fontSize, 10) - 3);
if(newFontSize <= minFontSizePx) {
break;
}
el.style.fontSize = newFontSize + "px";
}
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-06-04 01:01:30