2

我在 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。

4

4 回答 4

3

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

JavaScript（使用 jQuery）

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

演示

http://jsfiddle.net/EkfUR/

截至您的编辑

你在我写小提琴的时候编辑了你的问题。您当然可以使用/表达式中使用的另一个字符来替换为<wbr>-tag。

于 2013-03-01T14:05:09.483 回答
0

好的，也许这是您会看到的最糟糕的方法，但它确实可以解决问题...将字符串拆分为span然后使用带有:after空格的空格，如下所示：

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

这里的例子：http: //jsfiddle.net/pavloschris/b7qeD/

于 2013-03-01T14:40:50.727 回答
0

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

1) 拆分“ / ”中的字符串；

2) 从头到尾追加子串，而结果行小于TD;

3）如果它更大，不要附加最后一块，并将其放在下一行（如，<br />在它之前放一个）；

4）这样做直到您的拆分数组为空，这意味着您的字符串按您想要的方式中断。

于 2013-03-01T13:56:19.050 回答
0

我在 .css 中看不到任何内容来破坏特定点的文本部分（例如，在字母 't' 之后换行。

搜索“断字”

caniuse 断词

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-break-my-div通过插入带有正则表达式的软连字符 () 来调用拆分长单词的可能性。

于 2013-03-01T13:53:10.413 回答