非常に長い単語がHTML/CSSで折り返さない

Question

ユーザーが長いコメント/単語（ 'cooooooooooooooooooooooooooooooooooooooool'など）を入力すると、ページの書式が崩れてしまうという問題があります。

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

マークアップとCSSをあまり変更しないでこれを修正するのが簡単かどうかは、アプリケーションコード（ASP.NET/MVC 3で書かれています）を変更してバグを導入したくないコード領域だからです。

CSS/HTMLは、私は文字の「X」量の後にHTML 5 <wbr>タグは、単語を区切るために使用されることができると思いますオプションではありませんでした場合 - これで唯一の問題は、ウェブサイトを9つの言語でマルチリンガルであるということです。たとえば、日本語と中国語の場合、テキスト文字は英数字文字よりもかなり大きく、<wbr>を追加する前に文字数を取得するために複数の条件付きコードが必要になるか、フォントサイズが小さくなります。ちょうど最高の解決策に関する提案の直後。

多くのおかげ

Answer 1

この

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

Live Demo

More Information

をお試しください

Answer 2

これが役立つことがあります。

.class { 
    resize:none; 
} 

Answer 3

をあなたはそれがうまくとしてキャップすることしたい場合：OOOOOO ... 使用：

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

つ以上の行がある場合は、

を使用

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