非破坏冗长的单词

Question

请不要因为添加如下的可疑内容而烦恼.

jffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj

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

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

先谢谢,Madhu BN

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>