不中断冗长的单词答案

【问题标题】：Non breaking lengthy word不中断冗长的单词
【发布时间】：2010-01-19 05:10:14
【问题描述】：

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

jffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj P>

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

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

提前致谢问候，马杜·BN

【问题讨论】：

+1 用于超出 SO 布局。显然他们在这里没有使用任何答案。
感谢您的回复。我找到了另一种不使用溢出来实现此目的的方法：隐藏属性。只需使用
再次感谢大家。
我也将break-work 包含在我的答案中。
对不起，我还没有刷新页面。是的，你是完美的。我试图将宽度设置为 100%。那时，自动换行将从宽度为 100% 的父 div 中删除。

标签： html css

【解决方案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>

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

编辑：

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

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

或者甚至将它们放在一起以确保跨浏览器的安全。

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

【讨论】：

我同意...这绝对是最可靠的方法。
非常感谢先生。在不隐藏文本的情况下，我们不能中断内容以移至下一行。如果我在像素方面使用宽度，它工作正常。如果我使用 %，我该怎么办。
我进行了编辑以显示另一个选项。无论您使用像 width:100px 这样的像素宽度还是像 width:90% 这样的百分比，样式都应该表现出相同的行为

【解决方案2】：

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

【讨论】：

抱歉没有提到编程技术。我正在使用 c# 和 asp.net

【解决方案3】：

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

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

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

【讨论】：

据我所知这不是跨浏览器：gojomo.blogspot.com/2005/03/…
这是我从链接的 SO 问题中得到的印象。可能应该用那个打开。

【解决方案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);

【讨论】：

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

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

正则表达式也可以用来放入软连字符。

【讨论】：

【解决方案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>

【讨论】：