css - imagenes - tablas en html5

CSS: ¿Cómo envuelvo texto sin espacios en blanco dentro de un<td>?

Question

He usado:

word-break:break-all;
table-layout:fixed

y el texto se ajusta en Chrome, pero no en Firefox.

Actualización: decidí cambiar el diseño para que no necesitara la envoltura; Tratar de resolver un arreglo / corrección de CSS resultó ser demasiado frustrante y lento.

Answer 1

Aquí está la versión avanzada de lo que OP pidió.

A veces, lo que sucede es que nuestro cliente quiere que demos ''-'' después del salto de palabra al final de la línea.

Me gusta

AAAAAAAAAAAAAAAAAAAAAAABBBBBBBBBBB

romper a

AAAAAAAAAAAAAAAAAAAAAAA-
BBBBBBBBB

Por lo tanto, existe una nueva propiedad de CSS si es compatible, por lo general compatible con los últimos navegadores.

.dont-break-out {

  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;

}

Estoy usando este.

Espero que alguien tenga una demanda como esta.

Answer 2

Creo que este es un problema de larga data en Firefox, que se remonta a Mozilla y Netscape. Apuesto a que tenías problemas con la visualización de URL largas. Creo que es un problema con el motor de renderizado en lugar de algo que se puede solucionar con CSS, sin algunos hacks feos.

Tiene sentido cambiar el diseño.

Esto parecía esperanzado: http://hacks.mozilla.org/2009/06/word-wrap/

Answer 3

Establezca un ancho de columna para la etiqueta td .

Answer 4

Estoy usando Angular para mi proyecto, y logré resolver esto con un filtro simple:

Modelo:

<td>{{string | wordBreak}}</td>

Filtrar:

app.filter(''wordBreak'', function() {
    return function(string) {
        return string.replace(/(.{1})/g, ''$1​'');
    }
})

No puede verlo, pero después de $1 hay un espacio invisible (gracias @kingjeffrey por la sugerencia), que habilitó saltos de palabra para las celdas de la tabla.

Answer 5

Para un diseño de tabla automático, intente diseñar el td en cuestión combinando los atributos max-width y word-wrap.

Ejemplo: <td style="max-width:175px; word-wrap:break-word;"> ... </td>

Probado en Firefox 32, Chrome 37 e IE11.

Answer 6

Pruebe esto, creo que esto funcionará para algo como "AAAAAAAAAAAAAAAAAAAAAARRRRRRRRRRRRRRRRRRRRRRGGGGGGGGGGGGGGGGGGGGG" producirá

AARRRRRRRRRRRRRRRRRRRR
RRGGGGGGGGGGGGGGGGGGGG
G

Tomé mi ejemplo de un par de sitios web diferentes en Google. He probado esto en ff 5.0, IE 8.0 y Chrome 10.

.wrapword{
white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
white-space: -webkit-pre-wrap; /*Chrome & Safari */ 
white-space: -pre-wrap;      /* Opera 4-6 */
white-space: -o-pre-wrap;    /* Opera 7 */
white-space: pre-wrap;       /* css-3 */
word-wrap: break-word;       /* Internet Explorer 5.5+ */
word-break: break-all;
white-space: normal;
}

<table style="table-layout:fixed; width:400px">
    <tr>
        <td class="wrapword">
        </td>
    </tr>
</table>

Answer 7

Puede inyectar manualmente espacios de ancho cero (& # 8203;) para crear puntos de ruptura.

Answer 8

Una forma un poco hackish de hacer esto es procesar el texto para agregar espacio entre cada letra. Reemplazar espacios con   Luego use el atributo css espaciamiento de letras para reducir los espacios.

Lo sé, es un truco ... pero si NADA funciona, debería funcionar sin problemas.

Answer 9

Utilice el ajuste de word-wrap: break-word; CSS3: word-wrap: break-word; . También funciona en navegadores basados ​​en WebKit (Safari, Chrome).

Actualización : Olvidé que el elemento en cuestión debe estar implícita o explícitamente posicionado como elemento fijo o como elemento de bloque. Para celdas de tabla ( td ), use display: inline-block; .