html - para - ¿Cómo puedo permitir que el texto se ajuste dentro de una palabra si es necesario?
en html, el atributo alt se emplea para (8)
Estoy buscando la mejor solución para permitir que el texto se ajuste en medio de una palabra si es necesario. Por mejor, me refiero a la mayoría de los navegadores compatibles, y favoreceré los saltos de palabra antes de que se rompa dentro de una palabra.
También ayudaría si el marcado se viera mejor que el mío (vea mi respuesta).
Editar:
Tenga en cuenta que esto es específicamente para el contenido generado por el usuario.
Edición 2:
Aproximadamente el 25% de los usuarios de Firefox en el sitio en cuestión siguen utilizando v3.0 o inferior, por lo que es fundamental darles soporte. Esto se basa en el último mes de datos (aproximadamente 121,000 visitas).
Como no hay una respuesta definitiva (depende de sus necesidades, por ejemplo, ¿quiere guiones, qué navegadores debe admitir?), Hice una investigación a través de Adobe BrowserLab para averiguar cuáles son las opciones:
Si no necesita guiones, obtendrá la mejor compatibilidad con <wbr> . Si necesita guiones, use ­ es su mejor apuesta, pero tenga en cuenta que esto no funcionará (ajuste a la char) en Firefox 2.0 Mac / Windows o Safari 3.0.
Y, tenga en cuenta que si elige no manejar las palabras largas utilizando el desbordamiento, el desplazamiento o el ajuste de un carácter, IE6 e IE7 responderán expandiendo el ancho del contenedor (al menos con el DIV que usé), así que tenga cuidado.
Resultados:
Browser Method Wraps at char Adds Hyphens Overflows horizontally Container expands horizontally ---------------------------------------------------------------------------------------------------------------------------------------------- Firefox 3.0 - Windows XP None No No Yes No Firefox 3.0 - Windows XP <wbr> Yes No No No Firefox 3.0 - Windows XP ­ or ­ Yes Yes No No Firefox 3.0 - Windows XP word-wrap: break-word No No Yes No IE7 - Windows XP None No No No Yes IE7 - Windows XP <wbr> Yes No No No IE7 - Windows XP ­ or ­ Yes Yes No No IE7 - Windows XP word-wrap: break-word Yes No No No Firefox 3.0 - OS X None No No Yes No Firefox 3.0 - OS X <wbr> Yes No No No Firefox 3.0 - OS X ­ or ­ Yes Yes No No Firefox 3.0 - OS X word-wrap: break-word No No Yes No Safari 3.0 - OS X None No No Yes No Safari 3.0 - OS X <wbr> Yes No No No Safari 3.0 - OS X ­ or ­ No No No No Safari 3.0 - OS X word-wrap: break-word Yes No No No Chrome 3.0 - Windows XP None No No Yes No Chrome 3.0 - Windows XP <wbr> Yes No No No Chrome 3.0 - Windows XP ­ or ­ Yes Yes No No Chrome 3.0 - Windows XP word-wrap: break-word Yes No No No Firefox 2.0 - OS X None No No Yes No Firefox 2.0 - OS X <wbr> Yes No No No Firefox 2.0 - OS X ­ or ­ No No Yes No Firefox 2.0 - OS X word-wrap: break-word No No Yes No Firefox 2.0 - Windows XP None No No Yes No Firefox 2.0 - Windows XP <wbr> Yes No No No Firefox 2.0 - Windows XP ­ or ­ No No Yes No Firefox 2.0 - Windows XP word-wrap: break-word No No Yes No Firefox 3.5 - Windows XP None No No Yes No Firefox 3.5 - Windows XP <wbr> Yes No No No Firefox 3.5 - Windows XP ­ or ­ Yes Yes No No Firefox 3.5 - Windows XP word-wrap: break-word Yes No No No Firefox 3.5 - OS X None No No Yes No Firefox 3.5 - OS X <wbr> Yes No No No Firefox 3.5 - OS X ­ or ­ Yes Yes No No Firefox 3.5 - OS X word-wrap: break-word Yes No No No IE6 - Windows XP None No No No Yes IE6 - Windows XP <wbr> Yes No No No IE6 - Windows XP ­ or ­ Yes Yes No No IE6 - Windows XP word-wrap: break-word Yes No No No IE8 - Windows XP None No No Yes No IE8 - Windows XP <wbr> Yes No No No IE8 - Windows XP ­ or ­ Yes Yes No No IE8 - Windows XP word-wrap: break-word Yes No No No Safari 4.0 - OS X None No No Yes No Safari 4.0 - OS X <wbr> Yes No No No Safari 4.0 - OS X ­ or ­ Yes Yes No No Safari 4.0 - OS X word-wrap: break-word Yes No No No
Ejemplo de HTML:
<html>
<head>
<style>
div {
width: 4em;
border: 1px solid black;
margin-bottom: 6em;
padding: .25em;
}
</style>
</head>
<body>
This is text easily contained by the DIV:
<div>proper width</div>
A long word with no character breaking:
<div>
AReallyLongWordThatNeedsToBeBroken AndAnotherWord
</div>
<i><wbr></i> tag:
<div>
A<wbr>R<wbr>e<wbr>a<wbr>l<wbr>l<wbr>y<wbr>L<wbr>o<wbr>n<wbr>g<wbr>W<wbr>o<wbr>r<wbr>d<wbr>T<wbr>h<wbr>a<wbr>t<wbr>N<wbr>e<wbr>e<wbr>d<wbr>s<wbr>T<wbr>o<wbr>B<wbr>e<wbr>B<wbr>r<wbr>o<wbr>k<wbr>e<wbr>n A<wbr>n<wbr>d<wbr>A<wbr>n<wbr>o<wbr>t<wbr>h<wbr>e<wbr>r<wbr>W<wbr>o<wbr>r<wbr>d
</div>
<i>&shy;</i> character:
<div>
A­R­e­a­l­l­y­L­o­n­g­W­o­r­d­T­h­a­t­N­e­e­d­s­T­o­B­e­B­r­o­k­e­n A­n­d­A­n­o­t­h­e­r­W­o­r­d
</div>
<i>overflow: scroll</i> CSS attribute:
<div style="overflow: scroll">
AReallyLongWordThatNeedsToBeBroken AndAnotherWord
</div>
<i>word-wrap: break-word</i> CSS attribute:
<div style="word-wrap: break-word">
AReallyLongWordThatNeedsToBeBroken AndAnotherWord
</div>
</body>
</html>
En el pasado, he usado algo como esto (que no funcionaba en Safari en ese momento, IIRC, pero eso fue hace varios años):
A<wbr>V<wbr>e<wbr>r<wbr>y<wbr>L<wbr>o<wbr>n<wbr>g<wbr>W<wbr>o<wbr>r<wbr>d A<wbr>n<wbr>d<wbr>A<wbr>n<wbr>o<wbr>t<wbr>h<wbr>e<wbr>r<wbr>W<wbr>o<wbr>r<wbr>d
(Generaría esto dinámicamente para que la persona que realiza el diseño no tuviera que mirar semejante atrocidad).
Encontré una respuesta similar aquí: http://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
Un navegador más robusto.
Solo CSS
-ms-word-break: break-all;
/* Be VERY careful with this, breaks normal words wh_erever */
word-break: break-all;
/* Non standard for webkit */
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
Si tu texto es PHP generado tienes una función PHP :
<?php
$text = "The quick brown fox jumped over the lazy dog.";
$newtext = wordwrap($text, 20, "<br />/n");
echo $newtext;
?>
Además, puede probar la función PHP explotar si tiene y sabe el delimitador. Mostrar después con for loop (explode devuelve una matriz).
Es posible que desee comprobar la propiedad de CSS de ajuste de word-wrap: break-word .
El siguiente ejemplo funciona en Google Chrome 4.0, Firefox 3.5.7, Safari 4.0.4 e IE 8:
<html>
<body>
<div style="word-wrap: break-word; width: 50px;">
Loremipsumdolorsitametconsectetueradipiscingelitselaoreetdoloremagnaaliq
</div>
</body>
</html>
Desafortunadamente, como lo señaló BalusC en un comentario a una de las respuestas , lo anterior developer.mozilla.org/En/CSS/Word-wrap . Debido a que la población de usuarios que usan versiones antiguas de Firefox marketshare.hitslink.com/browser-market-share.aspx?qprid=2 , como lo señala TJ Crowder , es posible que desee recurrir a un overflow: scroll por los navegadores que no admiten el word-wrap . Puede que no se vea muy bien, pero si no espera que muchas palabras sean más largas que el espacio asignado, la probabilidad de que uno de los usuarios vea la barra de desplazamiento será muy baja, y se reducirá aún más a medida que pase el tiempo. Los usuarios actualizan sus navegadores. Al menos estarías fallando con gracia en esas situaciones.
Ingrese el salto de línea del teclado en el punto en el que desea que se rompa.
p.ej.
Esta es toda la palabra
se convertiría
Esta palabra larga
Mi respuesta de otra instancia de esta pregunta, encontrada en Wrapping long text in CSS :
Yo uso la combinacion
word-wrap: break-word;
overflow: hidden;
para hacer frente a esto. La configuración de ajuste de palabras permitirá que la palabra se ajuste a pesar de su longitud en los navegadores que admiten esa propiedad, mientras que la configuración de overflow hará que se corte al final del espacio disponible en los navegadores que no reconocen el ajuste de word-wrap . Eso es casi tan elegante de degradación como es probable que obtenga sin tener que ir a javascript.
[ Editar : OP actualizó su pregunta para decir que esto es específicamente para contenido generado por el usuario; lo siguiente no funcionará (fácilmente) para eso (tendría que tener su propio diccionario de separación de palabras). Sin embargo, dejándolo aquí, en caso de que alguien encuentre esta pregunta y necesite una opción de HTML para hacer esto.]
Puede usar un guión suave (también conocido como guión opcional; ­ o ­ ). Fue definido en HTML4 . Nunca lo he usado, pero lo probé y funciona en: IE6, IE7, Chrome 4, FF 3.6 y Safari 4 para Windows al menos.
Se podría argumentar que el usuario-agente (navegador) debería manejar esto automáticamente (usando un diccionario de guiones para el idioma en el que se encuentra el documento). En la práctica, no conozco un solo navegador web que lo haga automáticamente. Aparentemente, los navegadores modernos lo hacen si les dices que pueden; Vea la respuesta de wsanville para una opción de CSS.
La propiedad css word-wrap: break-word hará que las palabras largas se ajusten a la siguiente línea si son demasiado largas para su contenedor. Esto es compatible con IE (retrocediendo), Firefox y Safari.
Edición: Parece que puede lograr esto en versiones anteriores de Firefox y también usar white-space: -moz-pre-wrap y white-space: pre-wrap . Vea here para más información. Aunque no he probado esto con versiones anteriores de Firefox.