CSS word-wrap non funziona come previsto

Perché le proprietà di wrap non funzionano correttamente nell'esempio seguente?CSS word-wrap non funziona come previsto

Cosa posso fare per garantire che parte della parola 'consectetur' si inserisce nella prima riga in sé? Voglio il numero massimo di caratteri per adattarsi a ciascuna riga.

Il CSS è:

#fos { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
    font-size:14px; 
    font-weight: normal; 
    line-height: 18px; 
    width: 238px; 
    height:38px; 
    cursor: pointer; 
    word-wrap:break-word; 
    border:2px solid; }

fonte

2012-12-11 user930514

questo ha aiutato: http://stackoverflow.com/questions/10743763/word-wrap-break-word-does-not-work-in-this-example –

Usa word-break: break-all;

#fos { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
    font-size:14px; 
    font-weight: normal; 
    line-height: 18px; 
    width: 238px; 
    height:38px; 
    cursor: pointer; 
word-break: break-all; 
    border:2px solid; }

LIVE DEMO

fonte

2012-12-11 11:33:01 Sowmya

BTW: in base a questo: http: // caniuse .com/# feat = word-break 'wo rd-break' non funziona in Opera:/ – czachor

sì, non funziona per l'opera – Sowmya

Spezzare una parola in un punto arbitrario, senza nemmeno aggiungere un trattino alla fine di una riga, non è corretto dalle regole del maiale latino, per non parlare del latino o dell'inglese. –

E non va a capo correttamente, perché i browser non si applicano sillabazione automatica (che sarebbe il modo per provocare corretto wrapping) per impostazione predefinita. È necessario utilizzare la sillabazione CSS o la sillabazione basata su JavaScipt. L'impostazione word-wrap:break-word, nonché word-break: break-all, per definizione interrompe le parole (suddividendole per dividere i punti arbitary), invece del corretto avvolgimento.

fonte

2013-01-07 08:54:55

Poiché il css word-wrap non funziona in tutti i browser, utilizzare JavaScript invece! Dovrebbe dare lo stesso risultato.

La funzione seguente richiede JQuery e verrà eseguito ogni volta che si ridimensiona la finestra.

La funzione controlla se l'elemento ha più larghezza del suo genitore e, in caso affermativo, interrompe tutto invece che solo le parole. Non vogliamo che i bambini crescano più dei genitori, giusto?

Ho solo bisogno di esso per le tabelle, quindi se lo vuoi in qualche altro elemento, basta cambiare "table" in "#yourId" o ". YourClass". Assicurati che ci sia un parent-div o cambi "div" in "body" o qualcosa del genere?

Se si andrà ad altro, si trasforma in parola pausa e poi verificare se deve cambiare di nuovo, ecco perché c'è tanto di codice ..: '/

$(window).on('resize',function() { 
    $('table').each(function(){ 
     if($(this).width() > $(this).parent('div').width()){ 
      $(this).css('word-break', 'break-all'); 
     } 
     else{ 
      $(this).css('word-break', 'break-word'); 
      if($(this).width() > $(this).parent('div').width()){ 
       $(this).css('word-break', 'break-all'); 
      } 
     } 
    }); 
}).trigger('resize');

Spero che lavora per tu!

fonte

2014-10-31 13:09:46 SebHallin

Se word-wrap: break-all non funziona, provare anche aggiungere questo:

white-space:normal;

lavoro per me con la classe .btn in Bootstrap 3

fonte

2015-03-02 12:36:01

Non ho idea del motivo per cui funziona, ma questo mi ha risparmiato un sacco di tempo, grazie! – diplosaurus

Salvato il mio giorno ... –

Salvato il mio giorno !! Saluti! – Daft

Questo è utile per il confezionamento di testo in una sola riga:

fonte

2016-06-20 14:57:52 Manolo

CSS word-wrap non funziona come previsto

risposta

Problemi correlati