如何强制断开不可断裂的字符串？

Question

我有一个从数据库中包含的数据生成的 HTML 页面。数据库有时包含浏览器无法破解的长字符串，因为这些字符串不包含可破解字符（空格、点、逗号等）。

有没有办法使用 html、css 甚至 javascript 来解决这个问题？

有关问题的示例，请参阅此link。

Answer 1

也可以使用 word-break css 属性来剪切元素边缘的每个字。

.selector_name {
  word-break: break-all;
}

<p class="selector_name">some words some words some words some words</p>

you can obtain:
some word|
s some wo|<-edge of the element
rds some |
words som|
e words  |

Answer 2

使用­ 和上面的解决方案的问题是一个额外的字符仍然存在，并且通过复制/粘贴操作（即使是纯文本）它会出现。

我会使用不可见且在复制时不考虑的标签<wbr>。

例如，要让电子邮件地址分成两行（仅当空间不足时）我使用这个：

echo str_replace( "@","<wbr>@", $email );

结果如下：

name.surname
@website.com

Answer 3

基于this article 和this one as well：“害羞连字符”或“软连字符”可以用 HTML 编写为：­/­/&#xAD（173 dec = AD hex）。它们都转换为 U+00AD 字符。

DOM 文本节点的 JavaScript textContent 和 nodeValue 不是“实体编码” - 它们只包含实际实体。因此，为了编写这些字符，您必须自己对它们进行编码：\xAD 是在 JavaScript 字符串中写入相同字符的简单方法。 String.fromCharCode(173) 也可以。

基于您自己的非常好的答案 - 一个 jQuery 插件版本：

$.fn.replaceInText = function(oldText, newText) {
  // contents() gets all child dom nodes -- each lets us operate on them
  this.contents().each(function() {
    if (this.nodeType == 3) { // text node found, do the replacement
        if (this.textContent) {
            this.textContent = this.textContent.replace(oldText, newText);
        } else { // support to IE
            this.nodeValue = this.nodeValue.replace(oldText, newText);
        }
    } else {
      // other types of nodes - scan them for same replace
      $(this).replaceInText(oldText, newText);
    }
  });
  return this;
};

$(function() {
    $('div').replaceInText(/\w{10}/g, "$&\xAD");
});

附注：

我认为这不应该出现在 JavaScript 中——它应该出现在服务器端代码中。如果这只是一个用于显示数据的页面 - 您可以在将文本发送到浏览器之前轻松地对文本进行类似的正则表达式替换。然而，JavaScript 解决方案提供了一个优势（或劣势，取决于您如何看待它） - 在脚本执行之前，它不会向数据添加任何无关字符，这意味着任何爬取您的 HTML 输出以获取数据的机器人都不会看到害羞的连字符。尽管 HTML 规范将其解释为“连字符提示”和不可见字符，但在 Unicode 世界的其他地方并不能保证：（通过我链接的第二篇文章引用 Unicode 标准）

U+00AD 软连字符表示 断字点，换行符 当一个词是首选 连字符。根据脚本， 这个的可见渲染 发生换行时的字符可能 不同（例如，在某些脚本中 它呈现为连字符 -，而在 其他人可能是不可见的）。

另一个注意事项： 在 this other SO Question 中找到 - 似乎“Zero Width Space”字符 ​ / ​ / U+200b 是您可能想要探索的另一个选项。它将是 \x20\x0b 作为 javascript 字符串。

Answer 4

可以，只需将框的 css 属性设置为：

.some_selector {
    word-wrap: break-word;
}

编辑：一些测试表明它确实适用于 div 或 ap - 一个块级元素 - 但它不适用于表格单元格，也不能将 div 放在表格单元格中.

在 IE6、IE7、IE8、Firefox 3.5.3 和 Chrome 中测试并运行。

作品：

<div style="word-wrap: break-word">aaaaaaaaaaaaaaaaaaaaaaddddddddddddddddddddddddddddddddddddddddddaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </div>

Answer 5

在将长词添加到文档之前，将它们从文本字符串中拆分出来更容易。

最好避免孤儿，因为最后一行只有一两个字符。

此方法将在长度超过 n 的每个未加空格的字符中插入空格， 拆分它，使最后一行至少有 min 个字符。

function breakwords(text, n, min){
 var L= text.length;
 n= n || 20;
 min= min || 2;
 while(L%n && L%n<min)--n;
 var Rx= RegExp('(\\w{'+n+',}?)','g');
 text= text.replace(Rx,'$1 ');
 return text;
}

//测试

var n=30, min=5;

var txt= 'abcdefghijklmnopqrstuvwxyz0123456789 abcdefghijklmnopqrstuvwxyz012345678 abcdefghijklmnopqrstuvwxyz01234567 abcdefghijklmnopqrstuvwxyz0123456';

txt=txt.replace(/(\w{30,})/g,function(w){return breakwords(w,n,min)});

alert(txt.replace(/ +/g,'\n'))

/*  returned value: (String)
abcdefghijklmnopqrstuvwxyz0123
456789
abcdefghijklmnopqrstuvwxyz0123
45678
abcdefghijklmnopqrstuvwxyz012
34567
abcdefghijklmnopqrstuvwxyz01
23456
*/

Answer 6

我在这里回答我自己的问题...

根据您的回答，我想出了这个解决方案（感谢@CMS in this question 的帮助）。

此脚本通过在第 31 位插入空格来中断任何超过 30 个字符的单词。

这里是固定版本：link

我还有一个问题，我宁愿插入一个­，然后插入一个空格。但是分配node.nodeValue 或node.textContent 会导致插入文本­ 而不是标签。

<script type="text/javascript">

    $(function() {
        replaceText(/\w{30}/g, "$& ", document.body);
    });

    function replaceText(oldText, newText, node) {
        node = node || document.body; // base node 

        var childs = node.childNodes, i = 0;

        while (node = childs[i]) {
            if (node.nodeType == 3) { // text node found, do the replacement
                if (node.textContent) {
                    node.textContent = node.textContent.replace(oldText, newText);
                } else { // support to IE
                    node.nodeValue = node.nodeValue.replace(oldText, newText);
                }
            } else { // not a text mode, look forward
                replaceText(oldText, newText, node);
            }
            i++;
        }
    }

</script>

如果有人想出更简单的解决方案，我会等几天再接受这个答案。

谢谢

Answer 7

有特殊字符 ­ 或 ­ 可以做到这一点。 例如：

Dzie­le­nie wy­ra­zów

可能显示如下：

 1. dzie
 2. le
 3. nie wy
 5. ra
 6. zow

Answer 8

您可以使用 jQuery 来实现，但是如何：让我稍微解释一下。首先，您需要添加引用，并且有一个插件可以帮助您：Read More Plugin - JQuery 但是您需要在获取阶段穿透您的代码。此时，您可以在 HttpHandler 或 Page_PreInit 阶段处理此问题，但如果没有任何服务器端代码，它一定很困难，或者可能没有任何办法。我不知道，但您应该能够在您的数据库获取的 html 页面中添加一些内容。

Answer 9

正如已经多次指出的那样，不，如果不在显示字符串之前以编程方式预处理字符串，您将无能为力。

我知道有一种策略可以在需要的地方插入软连字符 (­)，但似乎不是一个流行的选项。

看看这个问题：Soft hyphen in HTML ( vs. ­)