什么是打破斜线（/）的HTML文本的最好方法？ [英] What is the best way to break HTML text on slashes (/)?

问题描述

我有一个360px宽的HTML表格，效果非常好。挑战是有时一个url在文本中出现 http：// this / is / a / really-really-really-really-really / long / url 。这会导致表格水平扩展，并在底部显示滚动条。

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.

我不认为 overflow：hidden

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

在CSS中强制折断斜线（/）和破折号（ - ）的最佳方式是什么（希望）？

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

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

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

使用Rails 3和jQuery。 / p>

Working in Rails 3 and jQuery.

推荐答案

可以使用 word-wrap：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;
}

6 / 7/8，Firefox 7，Opera 11，Safari 5，Chrome 15

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

这里是jsfiddle： http://jsfiddle.net/p4SxG/

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

这篇关于什么是打破斜线（/）的HTML文本的最好方法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！