Come faccio a racchiudere del testo senza spazi bianchi all'interno di un <td>?

89

Ho usato:

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

e il testo si avvolge in Chrome ma non in Firefox.

Aggiornamento: ho deciso di cambiare il design in modo che non fosse necessario il rivestimento; cercare di risolvere una correzione / hacking CSS si è rivelato troppo frustrante e richiedeva tempo.

css

— FunLovinCoder
fonte

202

Prova questo, penso che funzionerà per qualcosa come "AAAAAAAAAAAAAAAAAAAAAARRRRRRRRRRRRRRRRRRRRRRGGGGGGGGGGGGGGGGGGGG"

AARRRRRRRRRRRRRRRRRRRR
RRGGGGGGGGGGGGGGGGGGGG
G

Ho preso il mio esempio da un paio di diversi siti web su Google. L'ho testato su ff 5.0, IE 8.0 e 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;                  /* CSS3 */
    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>

— Stirling
fonte

10

Ahia!! Ciò forzerà la rottura di QUALSIASI parola in punti arbitrari anche quando non è necessaria. Esiste una soluzione alternativa per avere queste parole di interruzione SOLO quando è necessario non superare la larghezza del contenitore? Cioè, per farlo funzionare nel modo in cui "word-wrap: break-wird" dovrebbe funzionare in primo luogo se non fosse bacato?

— matteo

1

@matteo questa risposta ha funzionato meglio per me per questa ragione: stackoverflow.com/a/18706058/234132

— dochoffiday

2

Il problema della rottura della forza può essere risolto conword-break: break-word;

— user1721713

1

Mi sono iscritto allo stack overflow solo per questo

— falky

24

Usa CSS3 word-wrap: break-word;. Funziona anche con browser basati su WebKit (Safari, Chrome).

Aggiornamento : dimenticavo, l'elemento in questione deve comunque essere posizionato implicitamente o esplicitamente come elemento fisso o visualizzato come elemento blocco. Per le celle di tabella ( td), usa display: inline-block;.

— BalusC
fonte

1

Ho provato entrambi (separatamente), ma sfortunatamente hanno incasinato abbastanza male la formattazione della tabella.

— FunLovinCoder

Colpa mia, usa display: inline-block;.

— BalusC

13

Ecco la versione avanzata di quanto chiesto da OP.

A volte, quello che succede è che il nostro cliente vuole che diamo "-" dopo il word break alla fine della riga.

Piace

AAAAAAAAAAAAAAAAAAAAAAABBBBBBBBBBB

rompere a

AAAAAAAAAAAAAAAAAAAAAAA-
BBBBBBBBB

Quindi, c'è una nuova proprietà CSS se supportata, solitamente supportata nei browser più recenti.

.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;

}

Sto usando questo.

Spero che qualcuno abbia una domanda come questa.

— Rahul
fonte

11

Per un layout di tabella automatico, prova a modellare il td in questione combinando gli attributi max-width e word-wrap.

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

Testato in Firefox 32, Chrome 37 e IE11.

— XDM
fonte

Non capisco perché, ma funziona solo con max-widthe non con width. Tuttavia la soluzione migliore per me, perché non rompe le parole in punti arbitrari.

— Raziel

Anche fastidioso che le percentuali non funzionano

— yfeleke

4

Puoi inserire manualmente spazi di larghezza zero (& # 8203;) per creare punti di interruzione.

— kingjeffrey
fonte

1

C'è anche un tag HTML non standard <wbr>[per "word break"]. Ecco il supporto del browser per questo e la soluzione: quirksmode.org/oddsandends/wbr.html

— kingjeffrey

3

Imposta una larghezza di colonna per il tdtag.

— Rana nera
fonte

0

Penso che questo sia un problema di vecchia data in Firefox, che risale a Mozilla e Netscape. Scommetto che avevi problemi con la visualizzazione di URL lunghi. Penso che sia un problema con il motore di rendering piuttosto che qualcosa che puoi risolvere con CSS, senza alcuni brutti hack.

Ha senso cambiare il design.

Tuttavia sembrava pieno di speranza: http://hacks.mozilla.org/2009/06/word-wrap/

— dunxd
fonte

0

Sto usando Angular per il mio progetto e sono riuscito a risolverlo con un semplice filtro:

Modello:

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

Filtro:

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

Non puoi vederlo, ma dopo $1c'è uno spazio invisibile (grazie @kingjeffrey per il suggerimento), che ha abilitato le interruzioni di parola per le celle della tabella.

— Jeffrey Roosendaal
fonte

-1

Un modo leggermente hacker per farlo è elaborare il testo per aggiungere spazio tra ogni lettera. Sostituisci gli spazi con  Quindi usa l'attributo css di spaziatura delle lettere per ridurre gli spazi.

Lo so, è un trucco ... ma se NULLA funziona, dovrebbe avvolgere senza problemi.

— Armstrongest
fonte

2

È così hacky, così interrompendo la corretta indicizzazione e così difficile da implementare che non dovrebbe essere affatto una risposta :-)

— Capsule