Div divisa de ancho

ver el violín

html

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbb
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

css

 .e { font-size: 10px; font-family: arial; background-color: yellow; position: absolute; max-width: 300px; } 

notará que la segunda división se ajusta exactamente al tamaño del contenido, pero en la primera división hay un montón de espacio vacío a la derecha de las a y b. Esto se debe a que el div alcanzó su ancho máximo de 300px y luego envolvió las b en una segunda línea. La envoltura es buena, pero luego esperaría que la división se redujera al ancho de las letras para que no haya ningún espacio vacío a la derecha.

¿Es posible conseguirlo para hacer esto?

Probado en Chrome y FF. En

Para reducir un div (o cualquier elemento) al tamaño de su contenido de texto, puede usar JavaScript para obtener un range que contenga su contenido y obtener el tamaño del rango usando range.getBoundingClientRect() :

 function sizeElementToContents(el) { var range = document.createRange(); range.selectNodeContents(el); var textRect = range.getBoundingClientRect(); el.style.width = textRect.width + "px"; } 

Pero, por supuesto, eso solo funciona con los navegadores modernos. IE8 y IE7 tienen diferentes métodos para trabajar con rangos. En realidad, IE7 maneja automáticamente el max-width la forma deseada, pero cuando nuestro código IE8 se ejecuta para cambiar el tamaño de los divs en IE7, reduce los divs a 0. Para evitar escribir código para versiones específicas del navegador, este código se ejecuta en IE7 e IE8, pero incluye un poco de lógica adicional para que funcione en ambas versiones del navegador:

 function sizeElementToContents(el) { var range, width; if (document.createRange) { range = document.createRange(); range.selectNodeContents(el); width = range.getBoundingClientRect().width; } else { range = document.body.createTextRange(); range.moveToElementText(el); range.moveStart("character", 1); width = range.boundingWidth; var height = range.boundingHeight; range.collapse(); range.moveEnd("character", 1); if (range.boundingHeight == height) { return; // text doesn't wrap, so don't resize } } el.style.width = width + "px"; } 

Demostración de trabajo: http://jsfiddle.net/gilly3/HZRFb/

puede evitar manejar el ancho, ya que mi entendimiento es que está buscando una manera de romper el texto de una manera satisfactoria.

use word-break: break-all , para envolver el texto cada vez que toque el borde del contenedor.

Ejemplo:

  • demo en jsFiddle

Referencia:

  • La propiedad de word-break CSS3 en la red de desarrolladores de Mozilla

Bifurcación a partir de la solución de Biziclop :

 .e { font-size: 10px; font-family: arial; background-color: yellow; position: absolute; max-width: 300px; margin-right:100%; } 

Enlace al violín .

No me preguntes por qué funciona, podría romperse mañana, pero agregar algún margen extremo a la derecha parece resolver el problema:

 .e { margin-right: 9999px; } 

Ver http://jsfiddle.net/2cTga/1/