jquery - que - Encaja el texto perfectamente dentro de un div(altura y ancho) sin afectar el tamaño del div
hacer que un div ocupe todo el alto (8)
Me disculpo de antemano porque sé que esta pregunta ha surgido muchas veces antes, pero parece que no puedo encontrar la solución correcta (y créeme, ¡he probado algunas!
Básicamente es el antiguo " Ajustar texto perfectamente dentro de un div sin afectar el tamaño del div ". Y a menos que sea un número completo, creo que CSS no tiene forma de hacer esto. Entonces lo que quiero decir básicamente es más que hacer algo como:
#someDiv {
font-size: 12px;
}
o...
#someDiv {
font-size: 1em;
}
... quiero poder hacer algo como esto:
#someDiv {
font-size: fluid;
}
... lo que significa que cualquiera que sea el texto que contiene este div, escálelo para que se ajuste perfectamente de izquierda a derecha y de arriba a abajo sin desbordamiento ni espacios en blanco.
Después de rastrear innumerables sitios web en busca de esta solución CSS, ahora he aceptado que CSS no es capaz de esto ... así que, ingrese jQuery.
He encontrado varias soluciones jQuery en línea pero solo escalarán el texto para que se ajuste al ancho, pero también quiero que se ajuste a la altura. Así que efectivamente quiero decir a jQuery:
"jQuery, encuentra $ (este) div y cualquier texto que contenga, quiero que lo escales para que llene la altura y el ancho de la div con la mayor firmeza posible".
En caso de que no me haya explicado muy bien, adjunto un gráfico que explica el problema al que me estoy enfrentando y la solución que estoy buscando.
Cualquier ayuda sería muy apreciada. Gracias.
Aquí está la misma respuesta, pero en 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();
});
Por cierto ... si alguna vez necesitas convertir coffeescript a javascript, solo ve a js2coffee.org
Aquí está mi versión. Esto se construye con ES6 en un proyecto React.
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);
}
Aquí hay una versión ligeramente modificada de las respuestas dadas.
Requisitos :
- La clase que contiene texto tiene la clase "redimensionar".
- contiene altura y anchura (%, px, lo que sea ...)
¿Qué cambios en esta versión?
- Agregué redimensionar (vinculando el evento redimensionar a la función) autoSizeText. Esto dista mucho de ser ideal, pero si no cambiamos mucho el tamaño, debería estar bien.
- En versiones anteriores, el texto solo se hace más pequeño. Ahora trata de encontrar la fuente más grande sin salir del div.
Nota:
No reclamo que el código esté listo para producción. Pero si encuentra algo que puede mejorar, por favor compártalo con la comunidad.
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>
Disculpe la respuesta tardía pero puede ahorrar mucho tiempo, escribo este código que funciona perfectamente durante el cambio de tamaño de la ventana.
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" );
}
}
}
Donde text-wrapper es padre y texto alineado es hijo div. Debe especificar la altura y el ancho del elemento padre. Al cambiar el tamaño, puede establecer la altura y el ancho del elemento padre utilizando jquery y luego llamar a esta función.
Escribo este código porque probé mis muchos complementos pero no admiten el cambio de tamaño de la ventana.
No tengo suficiente reputación para comentar sobre la respuesta aceptada, así que hice una respuesta. Si height tiene una transición $.resizeText respuestas autoSizeText() y $.resizeText anteriores tienen problemas. Hice un pequeño plugin jquery para arreglar esto.
$.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();
}
Para usar este plugin solo necesitas llamar
$(selector).resizeText();
Espero que esto le ahorre a alguien más algún tiempo resolviendo problemas. Perdí unos buenos 20 minutos rascándome la cabeza preguntándome por qué el código anterior estaba causando un bucle infinito en mi página.
Quería algo similar a mí mismo recientemente:
<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>
Y
.no-resize, .resize {
width: 100px;
height: 50px;
border: 1px solid #000;
color: #000;
float: left;
margin-left: 10px;
font-size: 15px
}
Fiddler en jsfiddle.net/mn4rr/1/ .
Resolví esto haciendo un complemento de jQuery, está aquí: http://jsfiddle.net/c9YNz/2/ (Actualizado para tratar con el cambio de tamaño de las ventanas)
El código para el complemento simplemente reduce el tamaño del texto a 0.01em y luego lo aumenta para que encaje, aquí está el código del complemento:
$.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);
}
}
}
};
Entonces si tienes este html:
<div class="resizeText" style="width:1200px;height:400px;">
Insert text from slipsum here.
</div>
Lo llamas así:
$(document).ready(function () {
$(".resizeText").resizeText();
});
No es la mejor manera de hacerlo, pero es suficiente para que sigas adelante, me imagino (y además funciona).
Tengo el mismo problema y la solución es básicamente usar javascript para controlar el tamaño de la fuente. Mira este ejemplo en codepen:
https://codepen.io/ThePostModernPlatonic/pen/BZKzVR
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>