Parole molto lunghe che non si avvolgono in HTML/CSS

Question

Ho un problema nel caso in cui un utente inserisse un commento lungo/parola come "cooooooooooooooooooooooooooooooooooooooool ', ciò interromperà la formattazione sulla pagina.

Ecco un'immagine qui sotto per aiutare a spiegare lo scenario (non in scala) e anche il codice utilizzato:

Html:

<div class="comment-content"> 
    <p>cooooooooooooooooooooooooooooooooooooooool</p> 
    <br /> 
    <a class="delete-comment" data-delete-comment-id="28" href="/">Delete</a> 
</div> 

Css:

.comment-content 
{ 
    width: 525px; 
    margin: 13px 25px 0 0; 
} 
.comment-content p 
{ 
    width: 525px; 
} 

Mi chiedo se c'è una soluzione rapida per questo senza modificare troppo markup e CSS poiché questa è un'area di codice che non vorremmo introdurre bug modificando il codice dell'applicazione (scritto in ASP.NET/MVC 3).

Se CSS/Html non era un'opzione, suppongo che il tag HTML 5 <wbr> possa essere utilizzato per separare la parola dopo la "x" quantità di caratteri: l'unico problema è che il sito Web è multilingue in 9 lingue. Il giapponese e il cinese, ad esempio, i caratteri di testo sono notevolmente più grandi dei caratteri di testo inglese, che richiederebbero più codici condizionali per ottenere il conteggio dei caratteri prima di aggiungere <wbr> o diminuire la dimensione del carattere. Subito dopo i suggerimenti sulla soluzione migliore davvero.

Molte grazie

Answer 1

Prova questo

.comment-content p { 
    word-wrap: break-word; 
} 

Live Demo

More Information

Answer 2

Questo può aiutare:

.class { 
    resize:none; 
} 

Answer 3

Se desiderate che venga bene limitato come: oooooo ... uso:

.comment-content .p{ 
    display:inline-block; 
    white-space: nowrap; 
    overflow:hidden; 
    text-overflow: ellipsis; 
} 

Se ci sono più di una linea, utilizzare

.comment-content .p{ 
    word-wrap: break-word; 
}