在斜杠(/)上破坏HTML文本的最佳方式是什么?

时间：2022-09-13 07:56:16

I have an HTML table 360px wide, which works great. The challenge is that sometimes a url appears http://this/is/a/really-really-really-really-really/long/url in the text. This causes the table to expand horizontally and a scroll bar appears on the bottom.

我有一个360px宽的HTML表格，非常好用。问题是，有时一个url会在文本中出现http://this/is/a/re- re- re- reallyreallyreallyally-/long/url。这会导致表水平展开，在底部会出现一个滚动条。

I don't think overflow:hidden will work because half of the text would be hidden.

我不认为溢出:隐藏会起作用，因为一半的文本会被隐藏。

What is the best way to force breaking the line on slashes (/) and dashes (-) in CSS (hopefully)?

在CSS(但愿如此)中，在斜线(/)和破折号(-)上强制破折号的最佳方式是什么?

It should work with IE7+, Chrome, Firefox and Safari.

它应该与IE7+、Chrome、Firefox和Safari兼容。

Working in Rails 3 and jQuery.

使用Rails 3和jQuery。

2 个解决方案

#1

13  

You can use word-wrap : break-word; like so:

你可以使用单词包装:break-word;像这样:

<div>http://www.aaa.com/bbb/ccc/ddd/eee/fff/ggg</div>

div {
    width : 50px;
    border : 1px solid #000;
    word-wrap : break-word;
}

I tested this in: I.E. 6/7/8, Firefox 7, Opera 11, Safari 5, Chrome 15

我在:6/7/8,Firefox 7, Opera 11, Safari 5, Chrome 15中测试过这个

Here is a jsfiddle: http://jsfiddle.net/p4SxG/

这里有一个jsfiddle: http://jsfiddle.net/p4SxG/

#2

28  

While the css word-wrap: break-word; does work, its implementation is different across browsers.

而css换行:断点;确实有用，它的实现在不同的浏览器中是不同的。

If you have control of the content and want exact breakpoints, you can insert

如果您已经控制了内容并需要精确的断点，您可以插入。

  • a <wbr> word break (supported in all major browsers except IE8 CanIUse.com);
  • 断字(除IE8 CanIUse.com外，所有主要浏览器均支持);
  • &#8203; zero-width space (U+200B) - ugly in IE<=6
  • & # 8203;零宽度空间(U+200B) -在IE中很丑
  • &shy; soft hyphen - though of course this adds a hyphen when breaking which is not always what is desired.
  • :软连字符-虽然这当然增加了连字符时，打破这并不总是想要的。

I have a large corporate user base who still have to use IE8, so when I hit this problem I used the C# someString.Replace("/", "/&#8203;") in the server-side code.

我有一个庞大的企业用户群，他们仍然需要使用IE8，所以当我遇到这个问题时，我使用了c# someString。在服务器端代码中替换(“/”、“/​”)。

Gotcha: If you insert a zero-width space in an email address, when a user copies and pastes into their email client, the space gets copied too and the email will fail with no way for a user to see why (the space is zero width ...)

Gotcha:如果你在电子邮件地址中插入一个零宽度的空间，当用户拷贝和粘贴到他们的电子邮件客户端时，这个空间也会被复制，而电子邮件也会失败，用户就无法知道为什么(这个空间是零宽度…)

References

Further Reading

#1

13  

You can use word-wrap : break-word; like so:

你可以使用单词包装:break-word;像这样:

<div>http://www.aaa.com/bbb/ccc/ddd/eee/fff/ggg</div>

div {
    width : 50px;
    border : 1px solid #000;
    word-wrap : break-word;
}

I tested this in: I.E. 6/7/8, Firefox 7, Opera 11, Safari 5, Chrome 15

我在:6/7/8,Firefox 7, Opera 11, Safari 5, Chrome 15中测试过这个

Here is a jsfiddle: http://jsfiddle.net/p4SxG/

这里有一个jsfiddle: http://jsfiddle.net/p4SxG/

#2

28  

While the css word-wrap: break-word; does work, its implementation is different across browsers.

而css换行:断点;确实有用，它的实现在不同的浏览器中是不同的。

If you have control of the content and want exact breakpoints, you can insert

如果您已经控制了内容并需要精确的断点，您可以插入。

  • a <wbr> word break (supported in all major browsers except IE8 CanIUse.com);
  • 断字(除IE8 CanIUse.com外，所有主要浏览器均支持);
  • &#8203; zero-width space (U+200B) - ugly in IE<=6
  • & # 8203;零宽度空间(U+200B) -在IE中很丑
  • &shy; soft hyphen - though of course this adds a hyphen when breaking which is not always what is desired.
  • :软连字符-虽然这当然增加了连字符时，打破这并不总是想要的。

I have a large corporate user base who still have to use IE8, so when I hit this problem I used the C# someString.Replace("/", "/&#8203;") in the server-side code.

我有一个庞大的企业用户群，他们仍然需要使用IE8，所以当我遇到这个问题时，我使用了c# someString。在服务器端代码中替换(“/”、“/​”)。

Gotcha: If you insert a zero-width space in an email address, when a user copies and pastes into their email client, the space gets copied too and the email will fail with no way for a user to see why (the space is zero width ...)

Gotcha:如果你在电子邮件地址中插入一个零宽度的空间，当用户拷贝和粘贴到他们的电子邮件客户端时，这个空间也会被复制，而电子邮件也会失败，用户就无法知道为什么(这个空间是零宽度…)

References

Further Reading

标签：

相关文章