CSS envolver

Dado un recipiente bloqueCSS envolver

<div> 
this is a very long string which contains a bunch of characters that I want to break at container edges. 
</div>

¿hay propiedades CSS I puede configurar para que la fuerza para romper cuando alcanza la anchura del recipiente, independientemente de los contenidos de la cadena, por ejemplo un descanso como :

this is a ve 
ry long stri 
ng which ...

es prácticamente lo que quiero. En este momento, parece que siempre prefiere romper los espacios en blanco de los personajes u otros caracteres especiales (como /).

Fuente

2010-04-29 Mic

Puede tal vez la misma pregunta sobre al http://doctype.com/questions :) –

stackoverflow es todavía suficiente para este tipo de preguntas. –

@Magnus: Sin ofender, pero no he encontrado que doctype sea una muy buena fuente de respuestas para las preguntas que oscurecen hacia la técnica. – Robusto

Hay una propiedad de CSS3 llamada word-break que puede ser de alguna utilidad para usted en el futuro.

Más información está disponible aquí: http://www.css3.com/css-word-break/

El valor break-all se ve a hacer lo que está pidiendo:

Útil donde el contenido contiene una mayor parte del contenido del juego de caracteres asiáticos, a los que este el valor se comporta como 'normal'. El contenido del conjunto de caracteres no asiáticos puede romperse arbitrariamente entre líneas.

En cuanto a las versiones más compatibles de CSS, no creo que haya una manera de hacerlo.

Fuente

2010-04-29 15:03:22

Gracias, la propiedad CSS3 "salto de palabra: break-all;" trabajó en Webkit, pero lamentablemente no funciona (o está escondido en otro lugar) en Firefox. Un navegador hecho, algunos por delante :). – Mic

Aceptado, ya que lo resolvió para algunos navegadores. Todavía no parece posible resolver con CSS para Firefox :( – Mic

Esto funciona en la mayoría de los navegadores ahora. Consulte http://caniuse.com/#search=word -break – Josh

probar este

<style type="text/css"> 
div { 
white-space: -moz-pre-wrap; /* Mozilla, supported since 1999 */ 
white-space: -pre-wrap; /* Opera 4 - 6 */ 
white-space: -o-pre-wrap; /* Opera 7 */ 
white-space: pre-wrap; /* CSS3 - Text module (Candidate Recommendation) http://www.w3.org/TR/css3-text/#white-space */ 
word-wrap: break-word; /* IE 5.5+ */ 
} 
</style> 

<div style="width:200px"> 
adsjflk;asjfl;kasdjfl;kasdjfl;kasdjf;lkasdjf;lkasdjf;lkasjdf;lkajsd;lkadfjs;l 
</div>

Fuente

2010-04-29 15:06:45 Galen

Casi, por desgracia, todavía prefiere romper con guiones y espacios en blanco, si puede (Webkit). En Firefox se rompe con los caracteres antes mencionados además de/:(. – Mic

manera alternativa lograr el mismo encerrando el div en un div padre y el ajuste de la anchura de la div padre. Aunque podría no ser la solución ideal.

<div style="width:50px"> 
     <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div> 
     </div>

Fuente

2010-04-29 15:14:19

Lamentablemente, parece que la mayoría de los navegadores aún prefieren romper en espacios en blanco si la siguiente palabra no cabe en la línea actual : /. – Mic

Respuesta

Cuestiones relacionadas