multiple - remove css jquery
Tamaño automático de texto dinámico para llenar contenedor de tamaño fijo (18)
Aquí está mi modificación de la respuesta del OP.
En resumen, muchas personas que intentaron optimizar esto se quejaron de que se estaba utilizando un bucle. Sí, mientras que los bucles pueden ser lentos, otros enfoques pueden ser inexactos.
Por lo tanto, mi enfoque utiliza la búsqueda binaria para encontrar el mejor tamaño de fuente:
$.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);
Esto también permite que el elemento especifique la fuente mínima y máxima:
<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>
Además, este algoritmo no tiene unidades. Puede especificar em , rem , % , etc. y lo usará para su resultado final.
Aquí está el violín: https://jsfiddle.net/fkhqhnqe/1/
Necesito mostrar el texto ingresado por el usuario en un div de tamaño fijo. Lo que quiero es que el tamaño de la fuente se ajuste automáticamente para que el texto llene el cuadro tanto como sea posible.
Entonces, si el div es 400px x 300px. Si alguien entra en ABC, entonces es una fuente realmente grande. Si ingresan un párrafo, entonces sería una fuente pequeña.
Probablemente me gustaría comenzar con un tamaño de fuente máximo, tal vez 32px, y aunque el texto sea demasiado grande para ajustarse al contenedor, reduzca el tamaño de la fuente hasta que encaje.
Aquí hay otra versión de esta solución:
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";
}
}
Aquí hay un método de bucle mejorado que utiliza la búsqueda binaria para encontrar el tamaño más grande posible que se ajuste al padre en el menor número de pasos posibles (esto es más rápido y más preciso que el paso por un tamaño de fuente fijo). El código también está optimizado de varias maneras para el rendimiento.
De forma predeterminada, se realizarán 10 pasos de búsqueda binarios, que obtendrán dentro del 0.1% del tamaño óptimo. En su lugar, podría establecer numIter en algún valor N para obtener dentro de 1/2 ^ N del tamaño óptimo.
Llámelo con un selector de CSS, por ejemplo: 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);
}
});
};
Aquí hay una versión de la respuesta aceptada que también puede tomar un parámetro 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);
Bifurqué el guión de Marcus Ekwall: https://gist.github.com/3945316 y lo ajusté a mis preferencias, ahora se dispara cuando se cambia el tamaño de la ventana, para que el niño siempre se ajuste a su contenedor. He pegado el script a continuación para referencia.
(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);
EDITAR: este código se usó para mostrar notas sobre un video HTML5. Cambia el tamaño de la fuente sobre la marcha cuando se cambia el tamaño del video (cuando se cambia el tamaño de la ventana del navegador). Las notas se conectaron al video (al igual que las notas en YouTube), por lo que el código usa instancias en lugar de un identificador de DOM directamente.
Según la solicitud, introduciré un código que usé para lograrlo. (Cuadros de texto sobre un video HTML5). El código fue escrito hace mucho tiempo, y francamente creo que es bastante desordenado. Dado que la pregunta ya está respondida y una respuesta ya ha sido aceptada hace mucho tiempo, no me molesto en volver a escribir esto. Pero si alguien quiere simplificar esto un poco, ¡eres más que bienvenido!
// 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);
Probablemente deba ajustar estos números de la familia de fuentes a la familia de fuentes. Una buena manera de hacerlo es descargar un visualizador de gráficos gratuito llamado GeoGebra. Cambia la longitud del texto y el tamaño del cuadro. A continuación, establezca manualmente el tamaño. Grafique los resultados manuales en el sistema de coordenadas. Luego ingresa las dos ecuaciones que he publicado aquí y retoca los números hasta que "mi" gráfico se ajuste a sus propios puntos trazados manualmente.
Esto se basa en lo que GeekyMonkey publicó anteriormente, con algunas modificaciones.
; (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);
Gracias Attack . Quería usar jQuery.
Me señalaste en la dirección correcta, y esto es con lo que terminé:
Aquí hay un enlace al complemento: https://plugins.jquery.com/textfill/
Y un enlace a la fuente: 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 });
});
y mi html es asi
<div class=''jtextfill'' style=''width:100px;height:50px;''>
<span>My Text Here</span>
</div>
Este es mi primer plugin de jquery, así que probablemente no sea tan bueno como debería ser. Los punteros son ciertamente bienvenidos.
He creado una directiva para AngularJS, profundamente inspirada en la respuesta de GeekyMonkey pero sin la dependencia de jQuery.
Demostración: http://plnkr.co/edit/8tPCZIjvO3VSApSeTtYr?p=preview
Margen
<div class="fittext" max-font-size="50" text="Your text goes here..."></div>
Directiva
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();
});
}
};
});
La mayoría de las otras respuestas usan un bucle para reducir el tamaño de la fuente hasta que encaje en el div, esto es MUY lento ya que la página necesita volver a renderizar el elemento cada vez que la fuente cambia de tamaño. Finalmente tuve que escribir mi propio algoritmo para que funcionara de una manera que me permitiera actualizar su contenido periódicamente sin congelar el navegador del usuario. Agregué alguna otra funcionalidad (texto rotativo, relleno) y lo empaqueté como un complemento de jQuery, puede obtenerlo en:
https://github.com/DanielHoffmann/jquery-bigtext
simplemente llama
$("#text").bigText();
y encajará muy bien en su contenedor.
Véalo en acción aquí:
http://danielhoffmann.github.io/jquery-bigtext/
Por ahora tiene algunas limitaciones, el div debe tener una altura y un ancho fijos y no admite el ajuste de texto en varias líneas.
Trabajaré para obtener una opción para establecer el tamaño máximo de fuente.
Edición: he encontrado algunos problemas más con el complemento, no maneja otro modelo de caja además del estándar y el div no puede tener márgenes o bordes. Voy a trabajar en él.
Edit2: Ahora he solucionado esos problemas y limitaciones y he añadido más opciones. Puede establecer el tamaño máximo de fuente y también puede elegir limitar el tamaño de fuente utilizando ancho, alto o ambos. Trabajaré para aceptar los valores de ancho máximo y altura máxima en el elemento de envoltura.
Edit3: He actualizado el complemento a la versión 1.2.0. Limpieza importante en el código y nuevas opciones (verticalAlign, horizontalAlign, textAlign) y soporte para elementos internos dentro de la etiqueta de separación (como saltos de línea o iconos de fuente impresionante).
Las soluciones iterativas propuestas pueden acelerarse drásticamente en dos frentes:
1) Multiplica el tamaño de la fuente por alguna constante, en lugar de sumar o restar 1.
2) Primero, cero en el uso de una constante de curso, por ejemplo, doble el tamaño de cada bucle. Luego, con una idea aproximada de dónde comenzar, haga lo mismo con un ajuste más fino, por ejemplo, multiplique por 1.1. Mientras que el perfeccionista podría querer el tamaño exacto de píxeles enteros de la fuente ideal, la mayoría de los observadores no notan la diferencia entre 100 y 110 píxeles. Si es un perfeccionista, repita por tercera vez con un ajuste aún más preciso.
En lugar de escribir una rutina específica o un complemento que responda a la pregunta exacta, solo me baso en las ideas básicas y escribo variaciones del código para manejar todo tipo de problemas de diseño, no solo texto, incluyendo divs de ajuste, vanos, imágenes, etc. .. por ancho, altura, área, ... dentro de un contenedor, haciendo coincidir otro elemento ....
Aquí hay un ejemplo:
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'');
Me gustó
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));
No encontré que ninguna de las soluciones anteriores fuera lo suficientemente adecuada debido al mal desempeño, así que hice mi propia cuenta que usa matemáticas simples en lugar de bucles. Debería funcionar bien en todos los navegadores también.
Según este caso de prueba de rendimiento , es mucho más rápido que las otras soluciones que se encuentran aquí.
(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);
Si quieres contribuir he añadido esto a Gist .
Por mucho que me gusten los upvotes ocasionales que recibo por esta respuesta (¡gracias!), Este no es realmente el mejor enfoque para este problema. Por favor revise algunas de las otras respuestas maravillosas aquí, especialmente las que han encontrado soluciones sin hacer un bucle.
Aún así, por referencia, aquí está mi respuesta original :
<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>
Y aquí hay una versión con clases :
<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>
Puedes usar FitText.js ( página github ) para resolver este problema. Es realmente pequeño y eficiente en comparación con TextFill. TextFill utiliza un bucle while costoso y FitText no.
También FitText es más flexible (lo uso en un proyecto con requisitos muy especiales y funciona como un campeón).
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>
También puede establecer opciones para ello:
<script>
jQuery("#responsive_headline").fitText(1, { minFontSize: ''30px'', maxFontSize: ''90px''});
</script>
CSS:
#responsive_headline {
width: 100%;
display: block;
}
Y si lo necesita, FitText también tiene una versión sin jQuery .
Sé que este es un viejo, pero todavía hay personas que necesitan esta funcionalidad. Fui con la solución geekMonkey, pero su whack. simplemente porque es lento. lo que hace es ajustar el tamaño de la fuente al máximo (maxFontPixels) y luego comprueba si encaja dentro del contenedor. De lo contrario, reduce el tamaño de la fuente en 1px y vuelve a comprobar. ¿por qué no simplemente comprueba el contenedor anterior para la altura y envía ese valor? (Sí, sé por qué, pero ahora hice una solución, que solo funciona en la altura y también tiene una opción de mínimo / máximo)
solución mucho más rápida:
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();
);
y este sería el HTML:
<div class="textfill">
<span class="size-adjust">adjusted element</span>
other variable stuff that defines the container size
</div>
de nuevo: esta solución SOLO comprueba la altura del contenedor. Es por eso que esta función no tiene que verificarse, si el elemento encaja dentro. pero también implementé un valor mínimo / máximo (40min, 150max), así que para mí esto funciona perfectamente bien (y también funciona en el tamaño de la ventana).
Tengo el mismo problema y la solución es básicamente usar javascript para controlar el tamaño de la fuente. Compruebe este ejemplo en codepen:
https://codepen.io/ThePostModernPlatonic/pen/BZKzVR
Este ejemplo es solo para la altura, tal vez necesite poner algunos si es aproximadamente el ancho.
Intenta redimensionarlo
<!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>
Tuve exactamente el mismo problema con mi sitio web. Tengo una página que se muestra en un proyector, en las paredes, pantallas grandes ...
Como no sé el tamaño máximo de mi fuente, reutilizé el complemento anterior de @GeekMonkey pero incrementando el tamaño de fuente:
$.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 );
});
};