palabra larga en la celda de la tabla con anchos porcentuales

Question

http://jsfiddle.net/L2yLe/

El violín lo dice todo. Quiero una solución de solo CSS que limite el ancho de la tabla al ancho del div. La cadena larga debe estar rota (pero como puede ver no), y eso hace que la tabla se desborde.

No quiero usar ningún ancho de píxel. Esto debería ser completamente fluido.

<div> 
<table> 
    <tr> 
     <td> 
      short string 
     </td> 
     <td> 
somereallylongstringofdatasomereallylongstringofdatasomereallylongstringofdata 
     </td> 
     <td> 
      short string 
     </td> 
    </tr> 
</table> 
</div> 

div { 
    width: 50%; 
    background-color: darkgray; 
    padding: 15px; 
    margin: 10px auto; 
} 
table { 
    border-collapse: collapse; 
} 
td { 
    border: 1px solid black; 
} 

Answer 1

Guys echar un vistazo en http://blog.kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/

/* Warning: Needed for oldIE support, but words are broken up letter-by-letter */ 
    -ms-word-break: break-all; 
    word-break: break-all; 

    /* Non standard for webkit */ 
    word-break: break-word; 

    -webkit-hyphens: auto; 
    -moz-hyphens: auto; 
    -ms-hyphens: auto; 
    hyphens: auto; 

Answer 2

hay una propiedad CSS 3: word-wrap: break-word; ... OFC que requiere que el navegador para contar con el apoyo de CSS3.

Answer 3

escribir esto:

table { 
border-collapse: collapse; 
    table-layout: fixed; 
    width:100% 
} 
td { 
    border: 1px solid black; 
    word-wrap:break-word; 
} 

Comprobar esto: http://jsfiddle.net/L2yLe/7/

Answer 4

He estado jugando arround con esto durante un tiempo, y no es fácil demostrar en absoluto.

Puse el texto largo en un div y una palabra envuelta que pero la celda TD todavía alcanzaba el ancho completo a pesar de que div divise el texto.

Tengo una solución, pero es más que suficiente agregar una mesa de múltiples filas probablemente ne excesivo, lo pondré aquí en caso de que alguien más pueda mejorarlo, no soy un desarrollador de HTML y solo tengo comenzado a incursionar a mí mismo, pero aquí va

mixed table solution

he puesto el texto de gran tamaño en otra tabla dentro de la td original y establecer esa mesa de diseño: fijo; ancho 100% también se agregó un borde para mostrar qué está pasando. Es un poco de palanca, espero que alguien más pueda mejorarlo.

Answer 5

No creo que sea posible romper la palabra usando css. Usted podría calcular el número de caracteres al obtener los datos y luego insertar etiquetas de tramo alrededor de las secciones del texto si excede una cantidad predeterminada de caracteres consecutivos sin interrupción. La representación predeterminada de los navegadores colocaría los espacios entre líneas uno al lado del otro si hay suficiente espacio, o pasaría a la línea siguiente si no hay suficiente.

Answer 6

Mi solución es un poco fea. pero funciona realmente bien Ya sea usando JS o lo que sea que esté emitiendo su html, puede poner <wbr> entre cada X caracteres de texto. Esto le permite al navegador tomar una decisión sobre cuándo dividir las palabras, pero visualmente, aparecerá como una cadena si cabe en la celda de la tabla.

Answer 7

Adición "word-break: break-all;" va a funcionar!

Ver esto Example.