Question

请不要介意添加如下的可疑内容。

jffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj

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

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

提前致谢问候， Madhu BN

Answer 1

如果在重新显示用户输入时干扰页面设计，如果输入“不合适”，则使用overflow:hidden应用CSS样式将其剪掉。

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

Answer 2

如果您使用PHP打印文本，请查看wordwrap功能。

Answer 3

尝试在字符串中插入。它是“soft hyphen”的HTML元素。

如果使用PHP，print(wordwrap($string, 75, ''));

有关SO的更多信息：Soft hyphen in HTML (<wbr> vs. )

Answer 4

这是我刚才看到的一个跨浏览器解决方案，它在客户端运行并使用jQuery：

(function($) {
  $.fn.breakWords = function() {
    this.each(function() {
      if(this.nodeType !== 1) { return; }

      if(this.currentStyle && typeof this.currentStyle.wordBreak === 'string') {
        //Lazy Function Definition Pattern, Peter's Blog
        //From http://peter.michaux.ca/article/3556
        this.runtimeStyle.wordBreak = 'break-all';
      }
      else if(document.createTreeWalker) {

        //Faster Trim in Javascript, Flagrant Badassery
        //http://blog.stevenlevithan.com/archives/faster-trim-javascript

        var trim = function(str) {
          str = str.replace(/^\s\s*/, '');
          var ws = /\s/,
          i = str.length;
          while (ws.test(str.charAt(--i)));
          return str.slice(0, i + 1);
        };

        //Lazy Function Definition Pattern, Peter's Blog
        //From http://peter.michaux.ca/article/3556

        //For Opera, Safari, and Firefox
        var dWalker = document.createTreeWalker(this, NodeFilter.SHOW_TEXT, null, false);
        var node,s,c = String.fromCharCode('8203');
        while (dWalker.nextNode()) {
          node = dWalker.currentNode;
          //we need to trim String otherwise Firefox will display
          //incorect text-indent with space characters
          s = trim( node.nodeValue ).split('').join(c);
          node.nodeValue = s;
        }
      }
    });

    return this;
  };
})(jQuery);

Answer 5

在javascript中，在显示之前添加\ u200b - 零宽度空间

YOURTEXT=YOURTEXT.replace(/(.)/g,"\u200b$1");

Answer 6

您可以反复使用InsertAt来实现@ Ryan的解决方案，或者您可以执行验证以防止此类格式错误的数据到达数据库。

正则表达式也可用于将软连字符放入。

Answer 7

可以使用overflow-x (lots of cool examples after link)使用一点CSS修复它。

请确保指定宽度，否则overflow-x对您没有任何好处。

试试here

<style>
div{
  width: 105px;
  overflow-x: hidden;
  float: left;
  margin: 10px;
  padding: 4px;
  background: orange;
}
</style>
<div>WAYTOOLONGTOBESHOWN</div>
<div>WAYTOOLONGTOBESHOWN</div>

非破坏冗长的单词

7 个答案:

编辑：