javascript - texto - tipo de letra en css

cambiar dinámicamente el tamaño del tamaño de fuente basado en la longitud del texto usando css y html

Question

Necesito mostrar el texto introducido 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.

Probablemente me gustaría comenzar con un tamaño de fuente máximo y, si bien el texto es demasiado grande para ajustarse al contenedor, reduzca el tamaño de la fuente hasta que encaje y la fuente se muestre como una sola línea. ¿Es posible hacer esto usando solo css y html?

Answer 1

Di que tienes esto:

<div id="outer" style="width:200px; height:20px; border:1px solid red;">
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mollis dui felis, vel vehicula tortor cursus nec</div>
</div>

Entonces puedes hacer algo como:

$(document).ready(function () {
    resize_to_fit();
});

function resize_to_fit(){
    var fontsize = $(''div#outer div'').css(''font-size'');
    $(''div#outer div'').css(''fontSize'', parseFloat(fontsize) - 1);

    if($(''div#outer div'').height() >= $(''div#outer'').height()){
        resize_to_fit();
    }
}

Muestra de trabajo

$(document).ready(function() {
  resize_to_fit();
});

function resize_to_fit() {
  var fontsize = $(''div#outer div'').css(''font-size'');
  $(''div#outer div'').css(''fontSize'', parseFloat(fontsize) - 1);

  if ($(''div#outer div'').height() >= $(''div#outer'').height()) {
    resize_to_fit();
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outer" style="width:200px; height:20px; border:1px solid red;">
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mollis dui felis, vel vehicula tortor cursus nec</div>
</div>

Answer 2

Gracias putvande por dejarme saber el método general. Aquí hay una versión mejorada.

1. Deshazte del infierno de devolución de llamada.
2. Se han corregido algunos errores que pueden causar el bloqueo de la página

Mismo HTML:

<div id="outer" style="width:200px; height:20px; border:1px solid red;">
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mollis dui felis, vel vehicula tortor cursus nec</div>
</div>

Aquí está la función:

resize_to_fit($(''#outer''), $(''#outer div''));

function resize_to_fit(outer, inner) {
    while(inner.height() > outer.height()) {
        var fontsize = parseInt(inner.css(''font-size'')) - 1;
        inner.css(''font-size'', fontsize);
        // some browsers(chrome) the min font return value is 12px
        if(fontsize <= 1 || parseInt(inner.css(''font-size'')) >= fontsize+1)
            break;
    }
}

Answer 3

Obtener el tamaño en píxeles de una cadena de texto es algo difícil de realizar y depende mucho del navegador y de la configuración del usuario, por lo que probablemente sea difícil encontrar una solución que funcione en todos los casos.

Por "mostrar texto ingresado por el usuario", ¿quiere decir que el usuario está escribiendo en un cuadro de texto? Si es así, puede adjuntar un escucha de pulsación de tecla que verifique la longitud del valor del texto y, a continuación, ajuste el font-size la font-size consecuencia. Aquí hay un ejemplo, aunque probablemente necesite cambiar las longitudes y los tamaños de fuente para satisfacer sus necesidades:

Demo de trabajo

$(''#text'').on(''keypress'', function(e) {
    var that = $(this),
        textLength = that.val().length
    ;

    if(textLength > 30) {
        that.css(''font-size'', ''5px'');
    } else if(textLength > 20) {
        that.css(''font-size'', ''10px'');
    } else if(textLength > 10) {
        that.css(''font-size'', ''15px'');
    }
});

Answer 4

Quien quiera una función dinámica que dependa del ancho del elemento (basado en la respuesta putvande):

        $(document).ready(function () {
            var arrEl = [''div1'', ''div2'', ''div3''];
            resize_to_fit(arrEl);
        });

        function resize_to_fit(arr){
            for (var el in arr) {
                var jEl = $(''.'' + arr[el] + '' span'');
                var fontsize = jEl.css(''font-size'');
                jEl.css(''fontSize'', parseFloat(fontsize) - 1);
                if (jEl.width() >= $(''.'' + arr[el]).width()){
                    resize_to_fit([arr[el]]);
                }        
            }
        }

y el HTML:

<div class="div1">
    <span>Lorem Ipsum</span>
</div>
<br/>
<div class="div2">
    <span>Lorem Ipsum 2</span>
</div>
<br />
<div class="div3">
    <span>Lorem Ipsum 3</span>
</div>

con CSS:

.div1, .div2, .div3 {
    width: 207px;
    white-space: nowrap;
}

Tenga en cuenta que solo establece el tamaño de fuente para abarcar dentro, y no a la div exterior

Answer 5

Si por longitud de texto te refieres al recuento de caracteres, hay un artículo que apunta a un breve fragmento de jquery. Cambiar el tamaño de fuente dinámicamente según el recuento de caracteres

http://jsfiddle.net/jfbrLjt2/

 $(''.text'').each(function(){
 var el= $(this);
   var textLength = el.html().length;
    if (textLength > 20) {
        el.css(''font-size'', ''0.8em'');
    }
});

Answer 6

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #div1{
            width: 200px;
            height: 200px;
            font-size: 32px;
            line-height: 1.2em;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
    <script>
        $(function(){
            n = 1;
            while(n==1){
                n = 0
                if ($(''#div1 .holder'').outerHeight()>$(''#div1'').outerHeight()){
                    var fz = parseInt($(''#div1'').css(''font-size''));
                    $(''#div1'').css({''font-size'' : fz-1});
                    n = 1
                } else {n = 0}
            }
        });
    </script>
</head>
<body>
    <div id="div1">
        <div class="holder">I need to display user entered text into a fixed size div. What i want is for the font size to be automatically adjusted so that the text fills the box as much as possible.
I''d probably want to start with a maximum font size and while the text is too big to fit the container, shrink the font size until it fits and the font must be displayed as a single line. Is it possible to do this using only css and html.</div>
    </div>
</body>
</html>