wordWrap una stringa molto lunga

Question

Come si può visualizzare una lunga serie, indirizzo del sito web, parola o un insieme di simboli con linea automatica rompe per mantenere una larghezza div? Credo che un ritorno a capo automatico di sorta. Di solito l'aggiunta di opere di spazio, ma c'è una soluzione CSS come word-wrap?

Per esempio (molto nastily) sovrappone div, costringe scorrimento orizzontale etc. wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww

Che cosa posso aggiungere alla stringa di cui sopra per adattarsi ordinatamente nel giro di poche righe in un div o all'interno della finestra del browser?

Answer 1

Questa domanda è stato chiesto qui prima:

• Chi ha risolto il problema a lungo word-break-my-div? (Suggerimento: non StackOverflow)
• in css / js
• CSS: come posso forzare una lunga serie (senza alcun vuoto) essere avvolti in XUL e / o HTML
• trabocco CSS con URL lungo

Per farla breve:

Per quanto riguarda le soluzioni CSS vanno avete: overflow: scroll; per forzare l'elemento di mostrare le barre di scorrimento e overflow:hidden; di tagliare appena fuori qualsiasi testo supplementare. C'è text-overflow:ellipsis; e word-wrap: break-word; ma sono solo IE (break-word è nel progetto di CSS3, tuttavia, così sarà la soluzione a questo 5 anni da oggi).

La linea di fondo è che se è molto importante per voi per evitare che questo succeda con avvolgendo il testo sopra alla riga successiva l'unica soluzione ragionevole è quello di iniettare ­ (trattino morbido), <wbr> (parola tag pausa), oppure ​ (spazio larghezza zero, stesso effetto di <=> meno trattino) nel lato server stringa. Se non ti dispiace Javascript, tuttavia, v'è la hyphenator che sembra essere abbastanza solida.

Answer 2

word-wrap: break-word; è disponibile in IE7 +, 3,5 FF e Webkit browser abilitato (Safari / Chrome, ecc). Per gestire IE6 si dovrà anche dichiarare word-wrap: break-all;

Se FF 2.0 non è in vostra matrice del browser allora l'utilizzo di questi è una soluzione praticabile. Purtroppo non sillabi riga precedente in cui la parola è rotto, il che è un incubo tipografico. Io suggerirei di usare il Hyphenator come suggerito da Paolo, che è discreto JavaScript. La caduta-back per gli utenti non abilitati JavaScript sarà quindi la parola spezzata senza trattini. Posso vivere con quello per il momento. Questo problema molto probabilmente sorgere in un CMS, dove il web designer non ha il controllo su quali contenuti verranno inseriti o dove possono essere attuate interruzioni di linea e soft-trattini.

Ho preso uno sguardo alla W3 specifica dove sillabazione in CSS3 è discusso. Purtroppo sembra che ci sono ancora alcuni suggerimenti, ma nulla di concreto. Sembra i produttori di browser sono ancora da implementare nulla neanche ancora. Ho controllato sia Mozilla e Webkit per il codice proprietory ma non v'è alcun segno di.

Answer 3

word-break:break-all funziona a meraviglia

Answer 4

appena accennato sopra questo qui ma probabilmente più relative a questa domanda. La proprietà più poco sarà troppo pieno-wrap. e il miglior valore se viene attuata sarebbe:

* {
   overflow-wrap:hyphenate. 
}

doesen't sembra essere supportata in alcun modo appena ancora, al momento della scrittura su iPhone o Firefox, e troppopieno-wrap: sillabare non è nemmeno nella bozza di lavoro.

nel frattempo userei:

p {
    word-wrap: break-word;
    -moz-hyphens:auto; 
    -webkit-hyphens:auto; 
    -o-hyphens:auto; 
    hyphens:auto; 
}

Answer 5

display: block;
overflow: hidden;
text-overflow: ellipsis;
width: 200px; // or whatever is best for you

Answer 6

Io uso il codice per prevenire tutte le stringhe lunghe, URL e così via ..

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

Answer 7

Speriamo che un giorno ci arriveremo accesso alla word-wrap proprietà a CSS3: Forza Wrapping:. il 'word-wrap' immobile

Un giorno ...

Answer 8

cellule normalmente farà questo, naturalmente, ma si potrebbe forzare questo comportamento in un div con:

div {
  width: 950px;
  word-wrap: break-word;
  display: table-cell;
}

Answer 9

Specificare sempre proprietà line-height -. Se non viene specificato, potrebbe causare il fallimento della vostra word-break: break-all; proprietà

Answer 10

Sembra che questo fa il trucco per l'ultimo Chrome:

[the element],
[the element] * {
  word-wrap: break-word;
  white-space: pre;
}

Non ho controllato qualsiasi browser, ma Chrome.