word-break inconsistency in chrome

Question

Here is the jsfiddle: http://jsfiddle.net/fletchling/zQWb3/3/

Here is my 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>

Here is my 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;}

I got the code for .link here:

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

Two problems in chrome:

1) Chrome isn't reading word-break:break-all even with the -webkit prefix but this page on MDN says it supports it https://developer.mozilla.org/en-US/docs/Web/CSS/word-break When I inspect and manually add word-break:break-all it half works. Am I doing something wrong or is there a bug?

2)The "it half works" part: If you look at the fiddle, manually add the word-break:break-all, it adds a couple of letters from the link to the end of the paragraph and then keeps the rest of the link below the black square(that's an image in the original code). But now go remove some of the lorem ipsum so that the last line of text goes about half way across and then manually add the word-break:break-all and it'll actually do what it's supposed to. Why? And can anyone come up with a workaround? As always, thanks for the help.

***It may also be worth noting the IE still wouldn't cooperate with this css-trick styling on .link so I added word-wrap:break-word to .post and it now cooperates. Tried this for Chrome too though and it's still not having any of it. I don't understand why it works on .sm-post and not .link. Block element vs. inline? Any words of wisdom on that would be helpful, too.

Answer 1

Your css is messed up, see

http://jsfiddle.net/zQWb3/5/

Your container width is too small for the content

.sm-content{ width:700px; }

and you need to float the text content left

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

you can adjust the width as you please but make sure it fits the container. Since your image is floating, the text content isn't so the text container is actually overlapping with the image. If you use inspect in chrome you can see the box layout when you hover over the elements