5

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

下面是帮助解释场景（不按比例）以及使用的代码的图片：

在此处输入图像描述

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>或减小字体大小之前获得字符数。就在关于最佳解决方案的建议之后。

非常感谢

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 回答