很长的单词没有包装在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;
}

<强> Live Demo

<强> More Information

Answer 2

如果您希望将其封装为：oooooo ... 使用方法：

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

如果有多行，请使用

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

Answer 3

这可能有所帮助：

.class {
    resize:none;
}