在 td 中换行而不破坏单词答案

【问题标题】：Wrap text in td without breaking the word在 td 中换行而不破坏单词
【发布时间】：2013-03-01 13:46:49
【问题描述】：

我在 CSS 中的自动换行存在问题。我有一个td，我将width 定义为300px。我在 td 中有一个 url，比如

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。

【问题讨论】：

这与 Html 或 CSS 无关 :) 您可能需要一种服务器端语言，例如 PHP。
我们不能在 CSS 中控制它吗？我想我们可以..如果错了请纠正我..
CSS 不会将/ 与其他字符区别开来，因此它不会在那里破坏它。然而，它会在空白处中断。您最有可能需要自己输出，或使用 JS。
我们怎样才能实现这个JS..请帮助...
也质疑你为什么首先想要这个。除非您打算将其复制出来，否则在表格中包含长网址并不是很有用。否则，您会将其作为链接。

标签： javascript html css word-wrap

【解决方案1】：

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

JavaScript（使用 jQuery）

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

演示

http://jsfiddle.net/EkfUR/

截至您的编辑

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

【讨论】：

【解决方案2】：

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

搜索“断字”

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

【讨论】：

【解决方案3】：

你可以尝试在javascript上做。

1) 拆分"/"中的字符串；

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

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

4) 执行此操作，直到您的拆分数组为空，这意味着您的字符串按您想要的方式分行。

【讨论】：

【解决方案4】：

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

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

此处的示例：http://jsfiddle.net/pavloschris/b7qeD/

【讨论】：