在td中包装文本而不打破字 [英] Wrap text in td without breaking the word

问题描述

我在CSS中的字包装有问题。我有一个 td 其中我已经定义 width 为 300px 。我在td中有一个url，例如

I have an issue in word wrapping in CSS. I have a td where I have defined width as 300px. I have a url inside the td like

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

当我使用 word-wrap：break-word ，文本包装为

When I use word-wrap: break-word, the text is wrapping as

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

但我想要的话像在另一行中的 / tes 和 turl 我想要它，

But I do want the word to break. Like /tes in one line and turl in another line. I want it as,

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

请帮忙。任何帮助是赞赏。非常感谢。

Kindly help. Any help is appreciated. Thanks.

更新：

网址。意味着我不能继续在数据中的'/'。我可以使用javascript而不是jquery。

I also have probability of getting text other than URL. Means I can't relay on '/' in the data. I can use javascript not jquery.

推荐答案

我不能想到一个纯CSS解决方案。但使用JavaScript，您可以添加单词break opportunity标记< wbr> 。这告诉浏览器 - 除了Internet Explorer，它可以插入中断：

I can't think of a CSS-only solution. But using JavaScript you could add the word break opportunity tag <wbr>. This tells the browser - except for Internet Explorer - where it can insert breaks:

JavaScript（使用jQuery） b

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

演示

http://jsfiddle.net/EkfUR/

截至您的编辑

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

You edited your question while I was writing the fiddle. You can of course use another character than / used in the expression to be replaced with the <wbr>-tag.

这篇关于在td中包装文本而不打破字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！