Từ rất dài không gói trong HTML/CSS

Question

Tôi gặp sự cố nếu người dùng nhập một nhận xét/từ dài như 'cooooooooooooooooooooool' điều này sẽ phá vỡ định dạng trên trang.

Dưới đây là một hình ảnh dưới đây để giúp giải thích kịch bản (không quy mô) và cũng là mã được sử dụng:

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

Tôi tự hỏi nếu có một sửa chữa nhanh chóng cho điều này mà không thay đổi quá nhiều đánh dấu và CSS vì đây là khu vực mã chúng tôi sẽ không muốn giới thiệu lỗi bằng cách thay đổi mã ứng dụng (viết bằng ASP.NET/MV 3).

Nếu CSS/Html không phải là một tùy chọn, tôi đoán HTML 5 <wbr> Thẻ có thể được sử dụng để tách biệt từ sau ký tự 'x' - vấn đề duy nhất với trang web là đa ngôn ngữ trong 9 ngôn ngữ. Ví dụ, tiếng Nhật và tiếng Trung là ký tự lớn hơn đáng kể, sau đó các ký tự văn bản tiếng Anh cần nhiều mã điều kiện để nhận số ký tự trước khi thêm <wbr> hoặc kích thước phông chữ giảm. Chỉ sau khi đề xuất về giải pháp tốt nhất thực sự.

Nhiều Cảm ơn

Answer 1

Hãy thử điều này

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

Live Demo

More Information

Answer 2

này có thể giúp:

.class { 
    resize:none; 
} 

Answer 3

Nếu bạn muốn nó được độc đáo mũ như: oooooo ... sử dụng:

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

Nếu có nhiều hơn một dòng, sử dụng

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