php - texto - formularios en tablas html
Envolviendo texto largo en CSS (9)
Esta pregunta ya tiene una respuesta aquí:
Tengo texto como
<div style="float:left; width: 250px"> PellentesquePellentesquePellentesquePellentesquePellentesquePellentesquePellentesquePellentesquePellentesquePellentesquePellentesquePellentesquePellentesquePellentesquePellentesque feugiat tempor elit.
Ut mollis lacinia quam. Sed pharetra, augue aliquam ornare vestibulum, metus massalaoreet tellus, eget iaculis lacus ipsum et diam. </div>
No quiero el desplazamiento horizontal. ¿Es posible envolver el texto (salto de línea automático). Sé que hay algunas propiedades específicas de IE.
Gracias por tu tiempo.
ACTUALIZACIÓN: Puedo usar jQuery, Javascript, PHP para hacer esto también. ¿pero cómo? Me refiero a que las letras (fuente) no son de ancho fijo o como se llame.
Como word-wrap: break-word no funciona bien cuando el ancho no es fijo (e incluso menos en <table> ), Stack Exchange agrega algunos marcadores invisibles de Unicode, que los navegadores utilizan para encontrar posibles posiciones para saltos de línea. Pero: esos marcadores invisibles todavía están allí cuando el visitante copia el texto, lo que podría ser malo. Más detalles sobre Meta, en https://meta.stackexchange.com/questions/170970/occasionally-the-unicode-character-sequence-u200c-u200b-zwnj-zwsp-is-insert/ .
En lugar de la magia de Unicode, insertar <span style="display: inline-block"></span> cada pocos caracteres parece no tener un efecto negativo al copiar el texto resultante. Esto me funciona en Chrome 25, Firefox 19, Safari 6, Internet Explorer 9 (en Windows 7 en Parallels en una Mac; también simula los trabajos de IE8 y IE7), el navegador de valores y Chrome en Android 4.1 y Safari en iOS 6.1.2 , y probablemente también es compatible con Opera . Vea este ejemplo de JS Bin .
Algún día, <wbr> será la solución, pero no hoy : aunque IE7 lo admitió, IE8 y IE9 no.
Desafortunadamente, a menos que esté contento de admitir solo navegadores específicos (IE7 / Win, Safari, Firefox 3.5), no existe una solución CSS pura para su problema.
ajuste de palabra: palabra de descanso; Funciona, pero solo en IE.
Si puede modificar el texto, ya sea del lado del servidor (PHP, ASP) o posiblemente del lado del cliente (Javascript), puede escribir una pequeña función que inserte "guiones tímidos" ( & shy; ) en su texto. De esa manera, el texto se puede dividir en cada instancia del guión, y los guiones tímidos no se mostrarán si la palabra no se divide.
Editar, un ejemplo:
bla­bla­bla­bla­bla­bla­bla­bla­bla­ (etc)
se mostrará de la siguiente manera en su navegador:
blablabla-
blablabla-
blabla
En extensión a la respuesta de Duroth, puedes usar el siguiente código php para insertar los guiones tímidos
$longest_length = 15;
$string_with_long_word = ''short lonngerrrrr lonnnnnnnggeeeeeeeeeeeeeeeeeessssssssssssssssstttttttttttttt and another looooooooooooonnnnnnnnngwwooooooooororoooorrrrrd'';
$string = preg_replace_callback("/[a-z0-9]{{$longest_length},}/", ''putShyHyphen'', $string_with_long_word);
function putShyHyphen($matches) {
$string = $matches[0];
$newstring = '''';
for ($i=0; $i<strlen($string); $i++) {
$newstring .= $string[$i] . ''­'';
}
return $newstring;
}
echo $string_with_long_word . ''<hr />'';
echo $string;
Las etiquetas sugeridas funcionan para dividir palabras realmente largas (o URL), pero obtendrás resultados mixtos de un navegador a otro tratando de fluir el texto en divs estrechos. Por ejemplo, un div de 200px:
<div style="font-size:12px;font-family:monospace;width:200px;word-break:break-all;word-wrap:break-word;">1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890</div>
En Chrome los números se rompen, en Firefox no lo hacen, ¡obtienes dos columnas de números! Parece que Firefox no tiene en cuenta la cantidad de espacio disponible en la línea anterior de una palabra "larga"; no se rompe en cada oportunidad. Si alguna vez se corrige este comportamiento, espero que Firefox también considere cómo afecta esto a la justificación del texto.
Las etiquetas "tímidas" ayudan a Firefox, pero todavía obtienes texto "irregular". No he realizado pruebas exhaustivas, pero parece que las etiquetas tímidas generan resultados impredecibles (los divs pierden su estilo) cuando se usan en palabras cortas (menos de 8 caracteres) en Firefox. Personalmente prefiero los descansos más agresivos de Chrome!
Según http://www.w3.org/TR/css3-text/#word-break0
word-break: break-all;
... no hace lo mismo que word-wrap (que ahora se renombra a overflow-wrap ) porque incluso las palabras pequeñas pueden romperse cuando están al final de la línea. Pero funciona.
En algunos casos raros hyphen: auto; puede brindarle mejores resultados, pero solo si su palabra larga está incluida en un diccionario que usa el navegador.
Tienes que recurrir a JavaScript y usar una función como esta:
<script language="javascript">
function wrap() {
var data = document.getElementsByTagName(''yourtaghere'');
var desiredLength = 40 ;
var delimiter = "<br />";
for( var i=0; i < data.length; ++i ) {
cellLength=data[i].innerHTML.length
if( desiredLength < cellLength ) {
var counter=0;
var output="";
while( counter < cellLength ) {
output += data[i].innerHTML.substr(counter,desiredLength) + delimiter;
counter+= desiredLength;
}
data[i].innerHTML=output;
}
}
}
window.onload=wrap;
</script>
O podrías usar el hyphenator
Una nueva respuesta, ya que has cambiado tu pregunta:
Esta es una solución PHP muy simplista:
<?php
$string = "AnExtremelyLongStringWithoutWhitespacesOrBreakpointsOfAnyKindThatWillCompletelyAndUtterlyRuinYourWebsiteDesign";
for($i=0; $i<strlen($string); $i++) {
$newString .= $string[$i] . ''­'';
}
echo $newString;
Lo mismo se puede lograr en cualquier idioma del curso.
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.
css simple Intente esto: ponga su texto en < pre>...< /pre>
regla css
pre {
overflow-x: auto; /* Use horizontal scroller if needed; for Firefox 2, not needed in Firefox 3 */
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
/* width: 99%; */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}