很长的单词没有包装在HTML/CSS中

Question

我有一个问题,如果用户输入一个长注释/单词,如'coooooooooooooooooooooooooooooooooooooooool',这将打破页面上的格式.

下面是一张图片,用于帮助解释场景(不按比例)以及使用的代码:

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不是一个选项,我想HTML 5 <wbr>标签可以用来分隔'x'字符后的单词 - 唯一的问题是该网站是9种语言的多语言.日语和中文例如文本字符明显大于英文文本字符,这些字符需要多个条件代码才能在添加<wbr>或减小字体大小之前获得字符数.刚刚提出最佳解决方案的建议之后.

非常感谢

Answer 1

试试这个

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

现场演示

更多信息