Question

我在CSS中使用自动换行存在问题。我有一个td我已将width定义为300px。我在td里面有一个网址，如

http://www.abc.com/testing/testdata/testurl/test/testing.html

当我使用word-wrap: break-word时，文本将换行为

http://www.abc.com/testing/testdata/tes
turl/test/testing.html

但我确实希望这个词能够突破。与一行中的/tes和另一行中的turl相同。我想要它，

 http://www.abc.com/testing/testdata/testurl/
 test/testing.html

请帮助。任何帮助表示赞赏。感谢。

更新：

我也有获取URL以外的文本的可能性。意味着我无法在数据中'/'中继。我可以使用javascript而不是jquery。

Answer 1

我想不出只有CSS的解决方案。但是使用JavaScript，您可以添加单词break机会标记<wbr>。这告诉浏览器 - 除了Internet Explorer - 它可以插入断点：

JavaScript（使用jQuery）

$('#element').html( $('#element').html().replace(/\//g, '/<wbr>') );

<强>演示

http://jsfiddle.net/EkfUR/

编辑时

你在写小提琴时编辑了你的问题。您当然可以使用表达式中使用的/之外的其他字符替换为<wbr> - 标记。

Answer 2

我在.css中没有看到任何内容在特定点上打破文本部分（例如，在字母“t”之后的中断行。

搜索'word-break'

caniuse word-break

p {
    -ms-word-break: break-all;
    word-break: break-all;

     // Non standard for webkit
     word-break: break-word;

     -webkit-hyphens: auto;
     -moz-hyphens: auto;
     hyphens: auto;
 }

有一个与你的情况相关的好主题：how-to-prevent-long-words-from-breaking-my-div通过插入带有正则表达式的soft hyphen（）来调用分割长单词的可能性。

Answer 3

您可以尝试在javascript上执行此操作。

1）将字符串拆分为“ / ”;

2）从头到尾追加子串，而结果行小于TD的宽度;

3）如果它更大，不要追加最后一块，并将它放在下一行（如在其中放置一个<br />）;

4）执行此操作直到您的split数组为空，这意味着您的字符串会以您想要的方式打破。

Answer 4

好吧，也许这是你会看到的最糟糕的方法，但它确实有这个诀窍...... 将字符串拆分为span，然后使用:after这样的白色空格：

span:after{
 content:' ';
    font-size:0;
}

示例：http://jsfiddle.net/pavloschris/b7qeD/

在td中包装文本而不会破坏单词

4 个答案: