css word-wrap: break-word non funzionerà

Question

Ho due intervalli incorporati. codice di esempio:

<div class="comment_content"> 

     <span class="comment_author"><?= $child_comment['comment_author'] ?></span> 
     <span class="comment_text"><?= $child_comment['comment_content'] ?></span> 

    </div> 

E SCSS campione:

.comment_content {   
    word-wrap: break-word; 
} 
.comment_author { 
    display: inline-block; 
    vertical-align:top; 
} 
.comment_text {    
    display: inline-block; 
    word-wrap: break-word; 
    width: 100%; 
} 

Se mio avviso previsto deve essere:

Se l'utente immette stringa senza spazi, stringa non si rompe. E rompe il design:

Come rompere correttamente le parole lunghe ??

Answer 1

Utilizzare lo stile word-break per definire dove nella parola per passare alla riga successiva. Per impostazione predefinita, utilizza spazi o trattini, ma è possibile impostare a break-all per consentire rottura su qualsiasi lettera:

.comment_text { 
    display: inline-block; 
    word-wrap: break-word; 
    word-break: break-all; 
    width: 100%; 
} 

Answer 2

È possibile utilizzare

word-break: break-all; 

Vedi violino qui

fiddle

Answer 3

Utilizzare word-break: break-all; nella classe .comment_content.

Answer 4

di rompere correttamente-parole lunghe richiede di combinare diverse proprietà CSS, vorrei suggerire la definizione e l'applicazione di classe di supporto in questo modo:

.break-long-words { 
    overflow-wrap: break-word; 
    word-wrap: break-word; 
    word-break: break-all; 
    word-break: break-word; 
    hyphens: auto; 
} 

Proprietà spiegato:

• trabocco-wrap e word-wrap sono aliases per la stessa cosa ma alcuni browser supportano l'uno e non l'altro quindi abbiamo bisogno di entrambi. Sonoufficiale "corretto" modo di rompere le parole, ma non hanno alcun effetto sugli elementi con larghezza dinamica, quindi abbiamo bisogno di più ...
• interruzione di parola è originariamente previsto per richiedere un particolare comportamento con CJK (Testo cinese, giapponese e coreano) ma funziona in modo simile al word-wrap ma nel valore break-all di WebKit si interrompe tutto e ovunque. Per questo motivo, è necessario utilizzare un valore non corrispondente a non valido per WebKit documentato.
• e, facoltativamente, se è logico che le parole di apertura abbiano hypens (ad esempio per URL probabilmente no) possiamo utilizzare gli hypens nei browser che supportano tali (al momento Firefox, Safari, Edge e IE 10+). Si noti inoltre che in Firefox gli hypens non funzionano se si dispone della funzione di freno di parola , quindi a meno che non si disponga di un contenitore a larghezza fissa, è necessario scegliere tra hypens su FF o supporto legacy.

Si noti che ho omesso prefissi vendor, ma se non si utilizza qualcosa di simile Autoprefixer di questo è pieno verison:

.break-long-words { 
    overflow-wrap: break-word; 
    word-wrap: break-word; 
    -ms-word-break: break-all; 
    word-break: break-all; 
    word-break: break-word; 
    -ms-hyphens: auto; 
    -moz-hyphens: auto; 
    -webkit-hyphens: auto; 
    hyphens: auto; 
} 

Answer 5

io cosa sarà utile. Devi specificare width, in particolare nel tuo caso.

.comment_content{ 
 
    width:500px; 
 
    border:1px solid #ccc; 
 
} 
 

 
.comment_author{ 
 
    width: 100px; 
 
    float: left; 
 
} 
 

 
.comment_text{ 
 
    width: 400px; 
 
    word-wrap: break-word; 
 
    display:inline-block; 
 
}

<div class="comment_content"> 
 

 
     <span class="comment_author">Hello</span> 
 
     <span class="comment_text">qeqweqweqweqeeqeqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqeqweqweqweqweqweqweqwewqeqweqweqweqweqweqweqweqweqweqeqeqweqweqweqweqweqweqweqweqweqeqewqweqeq</span> 
 

 
    </div>

ecco un esempio di lavoro per ottenere ciò che si vuole: examples