Bardzo długie słowa, które nie są zawijane w HTML/CSS

Question

Mam problem, w którym jeśli użytkownik wprowadzał długi komentarz/słowo, takie jak "cooooooooooooooooooooooooooooooooooooooool", łamałoby to formatowanie na stronie.

Oto obraz poniżej w celu wyjaśnienia sytuacji (nie w skali), a także kod używany:

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

Zastanawiam się, czy istnieje szybkie rozwiązanie tego problemu bez zmiany zbyt wielu znaczników i CSS, ponieważ jest to obszar kodu, który nie chcemy wprowadzać błędów poprzez zmianę kodu aplikacji (napisanego w ASP.NET/MVC 3).

Jeśli CSS/HTML nie wchodziło w grę, domyślnie tag HTML 5 <wbr> może być użyty do oddzielenia słowa po "x" ilości znaków - jedynym problemem jest to, że strona jest wielojęzykowa w 9 językach. Japoński i chiński na przykład znaki tekstowe są znacznie większe niż angielskie znaki tekstowe, które wymagałyby wielu kodów warunkowych, aby uzyskać liczbę znaków przed dodaniem <wbr> lub zmniejszenie rozmiaru czcionki. Właśnie po tym, jak sugestie dotyczące najlepszego rozwiązania naprawdę.

Wiele Dzięki

Answer 1

Spróbuj

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

Live Demo

More Information

Answer 2

To może pomóc:

.class { 
    resize:none; 
} 

Answer 3

Jeśli chciałbyś to być ładnie szczyty jak: oooooo ... zastosowanie:

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

Jeśli istnieje więcej niż jedna linia, użyj

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