5

ユーザーが「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で記述）を変更してバグを導入したくないためです。

<wbr>CSS / Htmlがオプションではなかった場合、HTML 5タグを使用して、「x」文字数の後に単語を区切ることができると思います。これに関する唯一の問題は、Webサイトが9言語で多言語に対応していることです。たとえば、日本語と中国語のテキスト文字は英語のテキスト文字よりも大幅に大きいため、追加する前に文字数を取得し<wbr>たり、フォントサイズを小さくしたりするには、複数の条件付きコードが必要になります。本当に最良の解決策についての提案の直後。

どうもありがとう

4

3 に答える 3

7

これを試して

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

ライブデモ

詳しくは

于 2012-12-05T11:30:29.437 に答える
2

次のように適切にキャップしたい場合は、oooooo... を使用します。

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

複数の行がある場合は、

.comment-content .p{
    word-wrap: break-word;
}
于 2012-12-05T11:41:25.567 に答える
0

これは役立つかもしれません：

.class {
    resize:none;
}
于 2012-12-05T11:35:16.213 に答える