Tengo un feed de Twitter en mi blog. Está funcionando muy bien, pero hay un problema con las URL largas en los tweets. Las URL largas rompen el diseño al extenderse más allá del ancho del contenedor.Forzar un salto de línea en una URL
Mi código es el siguiente:
<ul id="twitter_update_list">
<!-- twitter feed -->
</ul>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/USERNAME.json?callback=twitterCallback2&count=3"></script>
El guión blogger.js contiene la función de devolución de llamada, que toma los datos de la solicitud Twitter y rellena <li> elementos a un predefinido <ul>.
estoy usando el siguiente CSS para romper automáticamente la línea (para los navegadores que soporta):
#twitter_update_list li span a {
word-wrap: break-word;
}
que sé sobre la etiqueta <wbr> y estaba tratando de usarlo con una función de jQuery que parecía esto:
$(document).ready(function(){
$("#twitter_update_list li span a").each(function(){
// a replaceAll string prototype was used here to replace "/" with "<wbr>/"
});
});
sin embargo cuando intenté usar ese fragmento, que causaría IE deje de responder y que no es bueno.
Estoy buscando un bloque de código que pueda agregar que solucionará el problema de salto de línea (agregando un salto de línea a URL largas). Firefox y Chrome funcionan correctamente, pero IE7 e IE8 necesitan algo más. (No me importa IE6.)
En realidad, acabo de encontrar esta pregunta que es casi exactamente como la tuya: http://stackoverflow.com/questions/1470810/wrapping-long-text-in-css – Nacho
El primer enlace fue genial, pero ninguno de esos propiedades trabajadas en IE8. Decidí usar el desbordamiento: oculto en el LI para solucionar el problema en IE8. – Jazzerus
gracias por el enlace interesante, @ign – Matt