Css chrome中的分词不一致

以下是JSFIDLE：

这是我的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>

我在这里得到了

.link

的代码：

http://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/

chrome中的两个问题：

1） Chrome没有读到

单词break:break all

，即使有

-webkit

前缀，但MDN上的这个页面说它支持它 当我检查并手动添加

wordbreak:break all

。我是做错了什么还是有bug

2） “它的一半工作”部分：如果你看小提琴，手动添加

单词break:break all

，它会从链接到段落末尾添加两个字母，然后将链接的其余部分保留在黑色方形下方（这是原始代码中的图像）。但是现在删除一些lorem ipsum，这样最后一行文本大约有一半，然后手动添加

单词break:break all

，它将实际执行它应该执行的操作。为什么？谁能想出一个解决办法？一如既往，谢谢你的帮助

---

***可能还值得注意的是，IE仍然不会在

.link

上与这个css技巧样式配合，所以我在

中添加了
单词包装：break word
。post

现在就配合了。虽然在Chrome上也试过了，但仍然没有。我不明白为什么它在

.sm post

上工作，而不是

.link

上工作。块元素与内联元素？任何关于这方面的智慧之言都会有所帮助。

您的css乱七八糟，请参阅

您的容器宽度对于内容来说太小

.sm-content{ width:700px; }

您需要将文本内容向左浮动

.post{margin: 0 1em; width:400px; float: left;}

---

你可以随意调整宽度，但要确保它适合容器。因为图像是浮动的，所以文本内容不是浮动的，所以文本容器实际上与图像重叠。如果在chrome中使用inspect，当您将鼠标悬停在元素上方时，您可以看到框布局，这只是为了将来的访问者：我实际上把css上的宽度传输搞砸了，所以这实际上不是问题所在，但浮动有帮助。非常感谢。

.post{margin: 0 1em; width:400px; float: left;}