Come impedire alle parole lunghe di interrompere il mio div?

Sin dal passaggio dal layout TABLE al layout DIV, rimane un problema comune:

PROBLEMA : riempi il tuo DIV di testo dinamico e inevitabilmente c'è una parola super lunga che si estende oltre il bordo della colonna div e rende il tuo sito non professionale.

RETRO-WHINING : questo non è mai successo con i layout di tabella. Una cella di tabella si espande sempre alla larghezza della parola più lunga.

SEVERITÀ : vedo questo problema anche sui siti più importanti, specialmente sui siti tedeschi in cui anche parole comuni come "limite di velocità" sono molto lunghe ("Geschwindigkeitsbegrenzung").

Qualcuno ha una soluzione praticabile a questo?

Trattino morbido

Puoi dire ai browser dove dividere le parole lunghe inserendo un trattino ( ­):

averyvery­longword

può essere reso come

averyverylongword

o

averyvery-
longword

Una bella espressione regolare può assicurarti che non li inserirai a meno che non sia necessario:

/([^\s-]{5})([^\s-]{5})/ → $1­$2

I browser e i motori di ricerca sono abbastanza intelligenti da ignorare questo personaggio durante la ricerca di testo e Chrome e Firefox (non ne hanno testati altri) lo ignorano quando copiano il testo negli Appunti.

<wbr> elemento

Un'altra opzione è quella di iniettare <wbr>, un ex IE-ism , che ora è in HTML5 :

averyvery<wbr>longword

Interruzioni senza trattino:

ogni
longword

Puoi ottenere lo stesso risultato con il carattere dello spazio di larghezza zero ​(o &#x200B).

Cordiali saluti, c'è anche CSShyphens: auto supportato dagli ultimi IE, Firefox e Safari ( ma attualmente non Chrome ):

div.breaking {
  hyphens: auto;
}

Tuttavia, la sillabazione si basa su un dizionario di sillabazione e non è garantito che le parole lunghe vengano spezzate. Può rendere più carino il testo giustificato.

Soluzione retro-piagnucolosa

<table>per il layout è male, ma display:tablesu altri elementi va bene. Sarà stravagante (ed elastico) come i tavoli della vecchia scuola:

div.breaking {
   display: table-cell;
}

overflowe anche le white-space: pre-wraprisposte qui sotto sono buone.

Due correzioni:

1. overflow:scroll - questo assicura che i tuoi contenuti possano essere visti a costo del design (le barre di scorrimento sono brutte)
2. overflow:hidden- interrompe qualsiasi overflow. Significa che le persone non possono leggere il contenuto però.

Se (nell'esempio SO) si desidera interrompere la sovrapposizione dell'imbottitura, probabilmente è necessario creare un altro div, all'interno dell'imbottitura, per contenere il contenuto.

Modifica: come affermano le altre risposte, ci sono una varietà di metodi per troncare le parole, sia quello di elaborare la larghezza di rendering sul lato client (non tentare mai di fare questo lato server in quanto non funzionerà mai in modo affidabile, multipiattaforma) attraverso JS e l'inserimento di caratteri di interruzione o l'utilizzo di tag CSS non standard e / o selvaggiamente incompatibili ( word-wrap: break-word non sembra funzionare in Firefox ).

Tuttavia, avrai sempre bisogno di un descrittore di overflow. Se il tuo div contiene un altro contenuto di blocco di dimensioni troppo grandi (immagine, tabella, ecc.), Avrai bisogno di un overflow per non distruggere il layout / design.

Quindi sicuramente usa un altro metodo (o una combinazione di essi) ma ricorda di aggiungere anche l'overflow in modo da coprire tutti i browser.

Modifica 2 (per rispondere al tuo commento di seguito):

Iniziare a utilizzare la overflowproprietà CSS non è perfetto, ma interrompe la progettazione. overflow:hiddenPrima domanda . Ricorda che l'overflow potrebbe non rompersi sull'imbottitura, quindi annida divo usa un bordo (qualunque cosa funzioni meglio per te).

Ciò nasconderà il contenuto traboccante e pertanto potresti perdere significato. Potresti usare una barra di scorrimento (usando overflow:autoo overflow:scrollinvece di overflow:hidden) ma a seconda delle dimensioni del div e del tuo design, questo potrebbe non apparire o funzionare alla grande.

Per risolverlo, possiamo usare JS per ritirare le cose e fare una forma di troncamento automatico. Stavo scrivendo per metà uno pseudo codice per te, ma a metà strada è diventato molto complicato. Se devi mostrare il più possibile, dai un'occhiata al trattino ( come menzionato di seguito ).

Basta essere consapevoli del fatto che ciò ha un costo per le CPU dell'utente. Potrebbe essere necessario molto tempo per caricare e / o ridimensionare le pagine.

Questo è un problema complesso, come sappiamo, e non supportato in modo comune tra i browser. La maggior parte dei browser non supporta affatto questa funzione in modo nativo.

In alcune attività svolte con le e-mail HTML, in cui veniva utilizzato il contenuto dell'utente, ma lo script non è disponibile (e persino il CSS non è supportato molto bene) il seguente bit di CSS in un wrapper attorno al blocco di contenuti non spaziati dovrebbe almeno aiutare in qualche modo:

.word-break {
  /* The following styles prevent unbroken strings from breaking the layout */
  width: 300px; /* set to whatever width you need */
  overflow: auto;
  white-space: -moz-pre-wrap; /* Mozilla */
  white-space: -hp-pre-wrap; /* HP printers */
  white-space: -o-pre-wrap; /* Opera 7 */
  white-space: -pre-wrap; /* Opera 4-6 */
  white-space: pre-wrap; /* CSS 2.1 */
  white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
  word-wrap: break-word; /* IE */
  -moz-binding: url('xbl.xml#wordwrap'); /* Firefox (using XBL) */
}

Nel caso dei browser basati su Mozilla, il file XBL sopra menzionato contiene:

<?xml version="1.0" encoding="utf-8"?>
<bindings xmlns="http://www.mozilla.org/xbl" 
          xmlns:html="http://www.w3.org/1999/xhtml">
  <!--
  More information on XBL:
  http://developer.mozilla.org/en/docs/XBL:XBL_1.0_Reference

  Example of implementing the CSS 'word-wrap' feature:
  http://blog.stchur.com/2007/02/22/emulating-css-word-wrap-for-mozillafirefox/
  -->
  <binding id="wordwrap" applyauthorstyles="false">
    <implementation>
      <constructor>
        //<![CDATA[
        var elem = this;

        doWrap();
        elem.addEventListener('overflow', doWrap, false);

        function doWrap() {
          var walker = document.createTreeWalker(elem, NodeFilter.SHOW_TEXT, null, false);
          while (walker.nextNode()) {
            var node = walker.currentNode;
            node.nodeValue = node.nodeValue.split('').join(String.fromCharCode('8203'));
          }
        }
        //]]>
      </constructor>
    </implementation>
  </binding>
</bindings>

Sfortunatamente, Opera 8+ non sembra gradire nessuna delle soluzioni di cui sopra, quindi JavaScript dovrà essere la soluzione per quei browser (come Mozilla / Firefox.) Un'altra soluzione cross-browser (JavaScript) che include le successive edizioni di Opera sarebbe usare lo script di Hedger Wang trovato qui: http://www.hedgerwow.com/360/dhtml/css-word-break.html

Altri link / pensieri utili:

Incoherent Babble »Blog Archive» Emulazione di word-wrap CSS per Mozilla / Firefox
http://blog.stchur.com/2007/02/22/emulating-css-word-wrap-for-mozillafirefox/

[OU] Nessuna parola a capo in Opera, visualizza bene in IE
http://list.opera.com/pipermail/opera-users/2004-November/024467.html
http://list.opera.com/pipermail/opera- utenti / 2004-novembre / 024468.html

Avvolgimento parola CSS Cross Browser

.word_wrap
{
    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}

Usa lo stile word-break:break-all;. So che funziona sui tavoli.

Vuoi dire che, nei browser che lo supportano, word-wrap: break-wordnon funziona?

Se incluso nella definizione del corpo del foglio di stile , dovrebbe funzionare in tutto il documento.

Se l'overflow non è una buona soluzione, solo un javascript personalizzato potrebbe spezzare artificialmente le parole lunghe.

Nota: esiste anche questo <wbr>tag Word Break . Questo dà al browser un punto in cui può dividere la linea. Sfortunatamente, il <wbr>tag non funziona in tutti i browser, solo Firefox e Internet Explorer (e Opera con un trucco CSS).

Ho appena verificato IE 7, Firefox 3.6.8 Mac, Firefox 3.6.8 Windows e Safari:

word-wrap: break-word;

funziona per collegamenti lunghi all'interno di un div con una larghezza impostata e nessun overflow dichiarato nel CSS:

#consumeralerts_leftcol{
    float:left;
    width: 250px;
    margin-bottom:10px;
    word-wrap: break-word;
}

Non vedo problemi di incompatibilità

Ho appena scoperto il trattino da questa domanda . Questo potrebbe risolvere il problema.

Dopo molti combattimenti, questo è ciò che ha funzionato per me:

.pre {
    font-weight: 500;
    font-family: Courier New, monospace;
    white-space: pre-wrap;
    word-wrap: break-word;
    word-break: break-all;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

Funziona con le ultime versioni di Chrome, Firefox e Opera.

Nota che ho escluso molte delle white-spaceproprietà suggerite dagli altri - che in realtà hanno rotto il prerientro per me.

Per me su un div senza dimensioni fisse e con contenuti dinamici ha funzionato usando:

display:table;
word-break:break-all;

Per quanto riguarda la regex in questo commento , è buono, ma aggiunge il trattino timido solo tra gruppi di 5 caratteri non bianchi o trattino. Ciò consente all'ultimo gruppo di essere molto più lungo del previsto, poiché non esiste un gruppo corrispondente dopo di esso.

Ad esempio, questo:

'abcde12345678901234'.replace(/([^\s-]{5})([^\s-]{5})/g, '$1­$2')

... risulta in questo:

abcde­12345678901234

Ecco una versione che utilizza lookahead positivo per evitare questo problema:

.replace(/([^\s-]{5})(?=[^\s-])/g, '$1­')

... con questo risultato:

abcde­12345­67890­1234

La soluzione che utilizzo di solito per questo problema è impostare 2 regole CSS diverse per IE e altri browser:

word-wrap: break-word;

è perfetto in IE, ma il ritorno a capo automatico non è una proprietà CSS standard. È una proprietà specifica di Microsoft e non funziona in Firefox.

Per Firefox, la cosa migliore da fare usando solo CSS è impostare la regola

overflow: hidden;

per l'elemento che contiene il testo che vuoi racchiudere. Non avvolge il testo, ma nasconde la parte di testo che supera il limite del contenitore . Può essere una buona soluzione se non è essenziale per te visualizzare tutto il testo (cioè se il testo è all'interno di un <a>tag)

Aggiornamento: gestire questo nei CSS è meravigliosamente semplice e con un basso sovraccarico, ma non hai alcun controllo su dove si verificano le interruzioni quando lo fanno. Va bene se non ti interessa, o i tuoi dati hanno lunghe corse alfanumeriche senza interruzioni naturali. Avevamo un sacco di lunghi percorsi di file, URL e numeri di telefono, ognuno dei quali ha dei posti in cui è decisamente meglio interrompere rispetto ad altri.

La nostra soluzione era di usare prima una sostituzione regex per inserire uno spazio di larghezza zero (& # 8203;) dopo ogni 15 (diciamo) caratteri che non sono spazi bianchi o uno dei caratteri speciali in cui preferiremmo le pause. Facciamo quindi un altro rimpiazzo per inserire uno spazio di larghezza zero dopo quei caratteri speciali.

Gli spazi a larghezza zero sono belli, perché non sono mai visibili sullo schermo; trattini timidi erano confusi quando hanno mostrato, perché i dati hanno trattini significativi. Inoltre, gli spazi di larghezza zero non sono inclusi quando si copia il testo dal browser.

I caratteri di interruzione speciali che stiamo attualmente utilizzando sono punto, barra, barra rovesciata, virgola, trattino basso, @, | e trattino. Non penseresti di dover fare nulla per incoraggiare la rottura dopo trattini, ma Firefox (almeno 3.6 e 4) non si rompe da solo nei trattini racchiusi tra numeri (come i numeri di telefono).

Volevamo anche controllare il numero di caratteri tra interruzioni artificiali, in base allo spazio di layout disponibile. Ciò significava che la regex per abbinare lunghe corse senza interruzioni doveva essere dinamica. Questo viene chiamato molto, e non volevamo creare le stesse identiche regex più e più volte per motivi di prestazioni, quindi abbiamo usato una semplice cache regex, codificata dall'espressione regex e dai suoi flag.

Ecco il codice; avresti probabilmente lo spazio dei nomi delle funzioni in un pacchetto di utilità:

makeWrappable = function(str, position)
{
    if (!str)
        return '';
    position = position || 15; // default to breaking after 15 chars
    // matches every requested number of chars that's not whitespace or one of the special chars defined below
    var longRunsRegex = cachedRegex('([^\\s\\.\/\\,_@\\|-]{' + position + '})(?=[^\\s\\.\/\\,_@\\|-])', 'g');
    return str
                .replace(longRunsRegex, '$1​') // put a zero-width space every requested number of chars that's not whitespace or a special char
                .replace(makeWrappable.SPECIAL_CHARS_REGEX, '$1​'); // and one after special chars we want to allow breaking after
};
makeWrappable.SPECIAL_CHARS_REGEX = /([\.\/\\,_@\|-])/g; // period, forward slash, backslash, comma, underscore, @, |, hyphen


cachedRegex = function(reString, reFlags)
{
    var key = reString + (reFlags ? ':::' + reFlags : '');
    if (!cachedRegex.cache[key])
        cachedRegex.cache[key] = new RegExp(reString, reFlags);
    return cachedRegex.cache[key];
};
cachedRegex.cache = {};

Prova in questo modo:

makeWrappable('12345678901234567890 12345678901234567890 1234567890/1234567890')

Aggiornamento 2: sembra che gli spazi a larghezza zero siano effettivamente inclusi nel testo copiato in almeno alcune circostanze, semplicemente non riesci a vederli. Ovviamente, incoraggiare le persone a copiare del testo con caratteri nascosti è un invito ad avere dati come quelli inseriti in altri programmi o sistemi, anche i tuoi, dove potrebbero causare problemi. Ad esempio, se finisce in un database, le ricerche su di esso potrebbero non riuscire e anche le stringhe di ricerca come questa potrebbero fallire. Usare i tasti freccia per spostarsi tra i dati in questo modo richiede (giustamente) un tasto aggiuntivo per spostarsi sul personaggio che non si vede, un po 'bizzarro per gli utenti se lo notano.

In un sistema chiuso, puoi filtrare quel carattere sull'input per proteggerti, ma ciò non aiuta altri programmi e sistemi.

Tutto sommato, questa tecnica funziona bene, ma non sono sicuro di quale sarebbe la scelta migliore per il personaggio che causa la rottura.

Aggiornamento 3: Avere questo personaggio nei dati non è più una possibilità teorica, è un problema osservato. Gli utenti inviano i dati copiati dallo schermo, vengono salvati nel database, le ricerche si interrompono, le cose si ordinano in modo strano ecc.

Abbiamo fatto due cose:

1. Ha scritto un'utilità per rimuoverli da tutte le colonne di tutte le tabelle in tutte le origini dati per questa app.
2. Aggiunto filtro per rimuoverlo al nostro processore di input di stringhe standard, quindi non è più disponibile quando viene visualizzato da qualsiasi codice.

Funziona bene, così come la tecnica stessa, ma è una storia di ammonimento.

Aggiornamento 4: lo stiamo utilizzando in un contesto in cui i dati forniti possono essere sottoposti a escape HTML. Nelle giuste circostanze, può inserire spazi di larghezza zero nel mezzo di entità HTML, con risultati funky.

La correzione consisteva nell'aggiungere la e commerciale all'elenco di caratteri su cui non ci rompiamo, in questo modo:

var longRunsRegex = cachedRegex('([^&\\s\\.\/\\,_@\\|-]{' + position + '})(?=[^&\\s\\.\/\\,_@\\|-])', 'g');

È necessario impostare "layout tabella: risolto" per il funzionamento a capo automatico

HYPHENATOR è la risposta giusta (indicata sopra). Il vero problema alla base della tua domanda è che i browser Web sono ancora (nel 2008) estremamente primitivi in ​​quanto non dispongono di una funzione di sillabazione. Senti, siamo ancora agli inizi dell'uso del computer - dobbiamo essere pazienti. Finché i progettisti dominano il mondo del web, ci sarà difficile aspettare alcune nuove funzionalità davvero utili.

AGGIORNAMENTO: A partire da dicembre 2011, ora abbiamo un'altra opzione, con il supporto emergente di questi tag in FF e Safari:

p {
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

Ho fatto alcuni test di base e sembra funzionare su una versione recente di Mobile Safari e Safari 5.1.1.

Tabella di compatibilità: https://developer.mozilla.org/en/CSS/hyphens#AutoCompatibilityTable

Per compatibilità con IE 8+ utilizzare:

-ms-word-break: break-all;
     word-break: break-all;

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

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

Guardalo qui http://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/

Tutto quello che dovevo fare era applicarlo allo stile del contenitore div con una larghezza impostata.

Usa questo

word-wrap: break-word;
overflow-wrap: break-word;
word-break: break-all;

Se hai questo -

  <style type="text/css">
      .cell {
            float: left;
            width: 100px;
            border: 1px solid;
            line-height: 1em;
      }
  </style>

  <div class="cell">TopLeft</div>
  <div class="cell">TopMiddlePlusSomeOtherTextWhichMakesItToLong</div>
  <div class="cell">TopRight</div>
  <br/>
  <div class="cell">BottomLeft</div>
  <div class="cell">BottomMiddle</div>
  <div class="cell">bottomRight</div>

passa a un formato verticale con div diventi e usa min-width nel tuo CSS anziché larghezza -

  <style type="text/css">
      .column {
            float: left;
            min-width: 100px;
      }
      .cell2 {
            border: 1px solid;
            line-height: 1em;
      }
  </style>

  <div class="column">
      <div class="cell2">TopLeft</div>
      <div class="cell2">BottomLeft</div>
  </div>
  <div class="column">
      <div class="cell2">TopMiddlePlusSomeOtherTextWhichMakesItToLong</div>
      <div class="cell2">BottomMiddle</div>
  </div>
  <div class="column">
      <div class="cell2">TopRight</div>
      <div class="cell2">bottomRight</div>
  </div>
  <br/>

Naturalmente, se si stanno visualizzando dati tabulari autentici, è corretto utilizzare una tabella reale poiché è semanticamente corretta e informerà le persone che utilizzano gli screen reader che si suppone si trovino in una tabella. Li sta usando per il layout generale o per il taglio delle immagini per cui le persone ti linciano.

Ho dovuto fare quanto segue perché, se le proprietà non fossero state dichiarate nell'ordine corretto, si spezzerebbero a caso le parole nel posto sbagliato e senza aggiungere un trattino.

    -moz-white-space: pre-wrap;
white-space: pre-wrap;        
    hyphens: auto;
    -ms-word-break: break-all;
    -ms-word-wrap: break-all;
    -webkit-word-break: break-word;
    -webkit-word-wrap: break-word;
word-break: break-word;
word-wrap: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
hyphens: auto;

Originariamente pubblicato da Enigmo: https://stackoverflow.com/a/14191114

Sì, se è possibile, impostare una larghezza assoluta e l'impostazione overflow : autofunziona bene.

p {
    overflow-wrap: break-word;
}


@-moz-document url-prefix() { 
    p {
        white-space: -moz-pre-wrap;
        word-wrap: break-word;
    }
}

"word-wrap: break-word" funziona in Firefox 3.5 http://hacks.mozilla.org/2009/06/word-wrap/

Aggiungi questo al csstuo div:word-wrap: break-word;

dopo che tutte le parole sono terminate e interrotte, preserva il tuo overflow e verifica se questo risolve il problema. cambia semplicemente il display del tuo div in:display: inline;

Una semplice funzione (richiede underscore.js) - basata sulla risposta @porneL

    String.prototype.shyBreakString = function(maxLength) {
        var shystring = [];
        _.each(this.split(' '), function(word){
            shystring.push(_.chop(word, maxLength).join('­'));
        });
        return shystring.join(' ');
    };

Ho scritto una funzione che funziona benissimo dove inserisce ­x lettere nella parola per una buona interruzione di riga. Tutte le risposte qui non supportano tutti i browser e i dispositivi, ma funziona bene usando PHP:

/**
 * Add line-break to text x characters in
 * @param  string  $text          
 * @param  integer $characters_in 
 * @return string                 
 */
function line_break_text($text, $characters_in = 10) {

    $split = explode(' ', $text);

    if ( ! empty($split)) {

        foreach ($split as $key => $var) {

            if ( strlen($var) > $characters_in ) {

                $split[$key] = substr_replace($var, '­', $characters_in, 0);

            }

        }

    }

    return implode(' ', $split);

}