这是jsfiddle：http: //jsfiddle.net/fletchling/zQWb3/3/
这是我的html：
<div class="sm-content sm-post">
<div class="row">
<div class="large-12 columns" >
<a href="#">
<div class="postImg margR"></div>
</a>
<div class="post margLR">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tafghfdghdfhfghtion ullaljkljkljljljljkljkmcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
<span class="link">
<a href="https://www.reallylong.com/this/is/a/really/long/url/and/it/drives/me/crazy">
https://www.reallylong.com/this/is/a/really/long/url/and/it/drives/me/crazy
</a>
</span>
</div>
</div>
</div>
</div>
这是我的CSS：
.post{webkit-word-wrap:break-word; word-wrap:break-word;}
.postImg{border: 1px solid #CCCCCC; float: left; width: 200px; margin-right:1em; background-color:#222; height:200px; display:inline;}
.sm-content{width:600px; border:1px solid #222; padding:1em; height: 300px;}
.link{-ms-word-break: break-all;
word-break: break-all;
-webkit-word-break: break-all;
word-break: break-word;
}
.post{margin: 0 1em; width:500px;}
我得到了.link这里的代码：
http://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
chrome的两个问题：
word-break:break-all1）Chrome甚至没有读取-webkit前缀，但是 MDN 上的这个页面说它支持它https://developer.mozilla.org/en-US/docs/Web/CSS/word-break
当我检查并手动添加word-break:break-all它时一半的作品。我做错了什么还是有错误？
word-break:break-all( _原始代码中的图像）。但是现在去删除一些 lorem ipsum 以便最后一行文本大约穿过一半，然后手动添加word-break:break-all它，它实际上会做它应该做的事情。为什么？任何人都可以想出一个解决方法吗？一如既往，感谢您的帮助。
***还可能值得注意的是，IE 仍然不会与这个 css-trick 样式合作，.link所以我添加word-wrap:break-word了.post它现在可以合作。虽然也为 Chrome 尝试过这个，但它仍然没有。我不明白为什么它可以工作.sm-post而不是.link. 块元素与内联？任何关于这方面的智慧之言也会有所帮助。