Question

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

有没有办法使用html，css甚至是javascript修复此问题？

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

Answer 1

是的，你可以，只需将框的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 2

基于this article和this one as well：“Shy Hyphen”或“Soft Hyphen”可以用HTML编写为： /  / {{1} }（173 dec = AD hex）。它们都转换为U + 00AD字符。

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

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

String.fromCharCode(173)

附注：

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

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

另一个注意事项： 在this other SO Question中找到 - 似乎“Zero Width Space”字符$.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"); }); /  / 是您可能想要探索的另一种选择。它将U+200b作为javascript字符串。

Answer 3

正如已经多次指出的那样，没有，你没有什么可以做的，没有在显示之前以编程方式预处理字符串。

我知道有一种策略可以在需要的地方插入软连字符（），但似乎不是一个受欢迎的选项。

查看此问题：Soft hyphen in HTML ( vs. )

Answer 4

也可以使用 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 5

可以执行特殊字符或。例如：

Dzie&#173;le&#173;nie wy&#173;ra&#173;zów

可以显示如下：

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

Answer 6

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

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

此脚本通过在第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

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

Answer 8

在将文本字符串中的长字添加到文档之前，更容易将其分解。

避免孤儿也很好，在最后一行你只有一两个字符。

此方法将在长于 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 9

使用和上述解决方案的问题是，还有一个额外的角色，并且有一个复制/粘贴动作（即使是纯文本），它就会出现。

我会使用不可见的标记<wbr>，在复制时不予考虑。

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

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

结果是这样的：

name.surname
@website.com

如何强制打破不易碎的琴弦？

9 个答案: