html - 不间断的长词

Question

请不要介意添加如下易受攻击的内容。

jffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj

我有一个多行 html 文本编辑器(微型 mce)。当用户输入不合适的词时，正如我在上面输入的那样!。它将正确保存在数据库中。当我尝试使用标签显示相同数据时。显示的数据扰乱了页面设计。

我该如何解决这个问题？ 请为此提供解决方案。

提前致谢 问候， 马杜国阵

Answer 1

如果在重新显示用户输入时会扰乱页面设计，并且如果输入“不合适”，则应用 CSS 样式通过使用 overflow:hidden 将其切断。 .

<style> 
    .fixed { overflow:hidden; }
</style>

然后将其应用于 div 或容器:

<div class="fixed" style="width:100px">The following input is really long and invalid. 

fffffffffffffffffffffffffffffffffffffffffffffffffffffjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj

jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj</div>

这样可以确保页面布局不受干扰。在上面的示例中，无论无效文本的不间断长度如何，都坚持使用 100px。

编辑:

如果您想要包装行为，请尝试使用 CSS word-wrap: break-word;

<style>
.fixed {
    word-wrap: break-word;
}
</style>

或者甚至将它们放在一起以真正安全地跨浏览器。

<style> 
    .fixed { 
        overflow:hidden; 
        word-wrap: break-word;
    }
</style>