CSS Span no se envuelve completamente

Tengo algunos problemas para envolver cosas en una nueva línea cuando alcanza el ancho máximo. Tengo mi blog configurado mostrando todas las etiquetas en un solo div, y cuando la primera línea alcanza el ancho máximo, la siguiente etiqueta debe pasar a la siguiente línea. (Se adjunta es lo que está sucediendo en Chrome y Firefox)CSS Span no se envuelve completamente

http://jsfiddle.net/QHWNF/7/

Aquí está el código CSS:

p.tagHolder{ 
margin-bottom:5px; 
line-height:25px;}

todo el HTML/PHP es,

<a href="#"><span>TagName</span></a><a href="#"><span>TagName2</span></a>....

Chrome Firefox

Fuente

2012-08-28 Zach Case

Tal vez se podría crear un violín mínima (jsfiddle.net) eso muestra el problema Ahí puedes incluso incluir tu imagen. –

http://jsfiddle.net/QHWNF/7/ –

Intente configurar sus tramos en display: inline-block.

http://jsfiddle.net/QHWNF/10/

Fuente

2012-08-28 20:23:51 Nate

Nate, gracias! Trabajado como un encanto. –

¡Me alegro de que haya sido útil! – Nate

@Krewe - genial funcionó, eso es lo que estaba pensando - dicho eso, envolvería el '' alrededor del '' en lugar de al revés, dando 'Test' - diciendo, desde mi punto de vista: Aquí hay una cosa que es una etiqueta, y esta etiqueta se vincula a (algo). –

Agregue word-wrap: normal; y word-break: normal; a su contenedor span y p. Esto garantizaría que las palabras se rompan solo en los puntos de corte permitidos cuando sea necesario envolverlos.

¡Espero que haya sido útil!

Fuente

2012-08-28 20:16:12 Chris

para Chrome y Firefox uso de las palabras-break: romper palabra y para IE utilizan -ms-palabra-break: mantener todo

Fuente

2016-03-17 11:30:03

CSS Span no se envuelve completamente

Respuesta

Cuestiones relacionadas