tl; dr;（2022年4月编辑）

在每个/之前使用<wbr> word-break-opportunity元素。请参阅下面进一步阅读的第一个链接。

详细信息（2014年原件）

虽然css word-wrap: break-word;确实可以工作，但它的实现在不同的浏览器中是不同的。
如果您可以控制内容并需要精确的断点，则可以插入

• <wbr>断字符（除IE8 www.example.com外，所有主要浏览器均支持）;CanIUse.com);
• ​零宽度空格（U +200B）-在IE中不美观〈= 6
• ­软连字符-虽然当然这会在断开时添加一个连字符，这并不总是所希望的。

我有一个庞大的企业用户群，他们仍然必须使用IE8，所以当我遇到这个问题时，我在服务器端代码中使用了C#someString.Replace("/", "/​")。
Gotcha：如果您在电子邮件地址中插入零宽度空格，当用户复制并粘贴到他们的电子邮件客户端时，空格也会被复制，电子邮件将失败，用户无法看到原因（空格是零宽度...）

参考文献

• 堆栈溢出
• http://www.quirksmode.org/oddsandends/wbr.html-示例

进一步阅读

• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr#example
• https://developer.mozilla.org/en-US/docs/Web/CSS/word-break
• https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap
• （2012年3月）
• 第一年第四年（2012年9月）
• 第一次第五次（2011年9月）

可以像这样使用word-wrap : break-word;：

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

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

我在以下环境中进行了测试：例如6/7/8、火狐7、Opera 11、Safari 5、Chrome 15浏览器
下面是一个jsfiddle：https://jsfiddle.net/p4SxG/

如果你真的不关心断字发生在哪里，最简单的方法是添加样式overflow-wrap: break-word;，这样可以允许长单词断字而不影响其他单词的断字。
但是如果你想在特定的字符处断开，比如斜线字符，你不能用CSS来实现，你必须用HTML来实现。如果你可以访问HTML代码，你可以选择以下任何一种解决方案：

• <wbr>断字机会标签
• ​零宽度空间
• ​零宽度空间

但是你并不总是可以访问HTML代码，有些网络应用程序不允许你在某些区域输入代码;例如，WordPress会过滤掉你在文章标题中输入的任何代码。在这种情况下，你可以直接插入一个零宽度空格字符。一种方法是使用Character Viewer（Mac）或Character Map（Windows），尽管当涉及到空格时，它们的使用当然有点棘手，因为空格是不可见的。在字符查看器的情况下，当你搜索箭头时，会出现很多匹配项，但是当你搜索零宽度空格时，似乎没有找到任何字符。但是如果你点击下面第二张图中蓝色方块的位置，你会发现找到了该字符，只是它是不可见的。

下面是演示这些不同方法全部有效的代码片段：

h1 {
  width: 15rem;
  border: 1px solid black;
}
.b {
  overflow-wrap: break-word;
}

A title which is too long
<h1>Seminars/Workshops</h1>
Breaking with CSS
<h1 class="b">Seminars/Workshops</h1>
Breaking with HTML: code-based solutions
<h1>Seminars<wbr>/<wbr>Workshops</h1>
<h1>Seminars&#8203;/&#8203;Workshops</h1>
<h1>Seminars&ZeroWidthSpace;/&ZeroWidthSpace;Workshops</h1>
Breaking with HTML: character-based solution
<h1>Seminars​/​Workshops</h1>