css - 非常长的单词不包含在 HTML/CSS 中

Question

我有一个问题，如果用户要输入长评论/单词，例如“coooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooool”，这会破坏页面上的格式。

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

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