Saber cuánto va a ser una línea de texto en HTML para el ajuste de palabras y otras aplicaciones

¿Conoces una buena manera de navegar entre navegadores para saber qué tan ancho será una línea de texto para poder romperla exactamente para ajustarse a un ancho fijo?Saber cuánto va a ser una línea de texto en HTML para el ajuste de palabras y otras aplicaciones

Supongamos que quiere romper un texto largo para que no se desborde un contenedor de ancho fijo, pero desea que la línea se rompa lo más cerca posible del borde, así que adivinar dónde insertar s no es limpio solución.

Quiero investigar, me imagino que esto podría hacerse teniendo un div invisible, luego imprimiendo la línea dentro de él y comprobando el ancho del div, o algo así, con Javascript.

¿Alguien ha hecho algo como esto?

* (el foco no es el ajuste de texto, que es sólo la aplicación que viene a la mente ahora, pero sabiendo que la anchura de un texto es lo que quiero)

Fuente

2009-08-01 Petruza

Eche un vistazo a http://stackoverflow.com/questions/118241/calculate-text-width-with-javascript –

@Josef: la respuesta en esa pregunta puede afectar la apariencia visual de la página. Específicamente en IE, puede causar que aparezca una barra de desplazamiento horizontal sin motivo aparente para el usuario. – AnthonyWJones

@AnthonyWJones: Veo, ¿podría considerar agregar su respuesta allí también? –

Aquí es un completo "Heath Robinson" (hace que la referencia viajar bien?) enfoque.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
    <script type="text/javascript"> 
     function txtContent_onchange() 
     { 
      var span = document.getElementById("spanMeasure") 
      span.innerHTML = ""; 
      span.appendChild(document.createTextNode(this.value)); 
      document.getElementById("txtWidth").value = span.scrollWidth; 

     } 
    </script> 
    <style type="text/css"> 
     #spanMeasure 
     { 
      position:absolute; 
      top:0px; 
      left:0px; 
      visibility:hidden; 
      width:10px; 
      white-space:nowrap; 
      overflow:hidden 
     } 
    </style> 
</head> 
<body> 

    <input id="txtContent" onchange="txtContent_onchange.call(this)" /><br /> 
    <input id="txtWidth" /> 
    <span id="spanMeasure"><span> 

</body> 
</html>

Lo más importante aquí es la configuración del elemento span. Este elemento no afectará la apariencia visual de la página. Su propiedad scrollWidth devolverá la longitud del texto que contiene. Por supuesto, necesitaría establecer cualquier atributo de estilo de fuente para obtener un valor razonable.

Según quirksmode, el sitio Opera puede ser un poco escamoso con este enfoque, pero sospecho que es lo más cercano que obtendrá a una solución totalmente de navegador.

Fuente

2009-08-01 20:45:33 AnthonyWJones

Saber cuánto va a ser una línea de texto en HTML para el ajuste de palabras y otras aplicaciones

Respuesta

Cuestiones relacionadas