很长的单词没有包装在HTML/CSS中 [英] Very long words not wrapping in HTML/CSS

问题描述

我遇到一个问题，如果用户输入长注释/单词，例如"cooooooooooooooooooooooooooooooooooooooooool"，这会破坏页面上的格式.

I have an issue where if a user was to enter a long comment/word such as 'cooooooooooooooooooooooooooooooooooooooool' this would break the formatting on the page.

下面是一张图片，用于说明场景(不按比例缩放)以及所使用的代码:

Here is an image below to help explain the scenario (not to scale) and also the code used:

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编写)引入错误的代码区域.

I am wondering if there is a quick fix for this without changing too much markup and CSS as this is area of code we would not want to introduce bugs by changing the application code (written in ASP.NET/MVC 3).

如果不是CSS/Html选项，我猜HTML 5 <wbr>标签可以用来分隔'x'个字符后的单词-唯一的问题是该网站支持9种语言的多语言.例如，日文和中文的文本字符要比英文文本的字符大得多，英语文本的字符需要多个条件代码才能获得字符计数，然后再添加<wbr>或减小字体大小.只是在提出最佳解决方案的建议之后.

If CSS/Html was not an option I guess the HTML 5 <wbr> Tag could be used to seperate the word after 'x' amount of characters - the only issue with this is that the website is multi lingual in 9 languages. Japanese and Chinese for instance the text characters are significantly larger then English text characters which would need multiple conditional code for these to get the character count before adding the <wbr> or the font size decreased. Just after suggestions on the best solution really.

非常感谢

推荐答案

尝试一下

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

实时演示

更多信息

这篇关于很长的单词没有包装在HTML/CSS中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！