Несоответствие словосочетания в Chrome

Question

Вот 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/

Две проблемы в хроме:

1) Chrome не читает word-break:break-all даже с -webkit префикс, но эта страница в MDN говорит, что поддерживает его https://developer.mozilla.org/en-US/docs/Web/CSS/word-break Когда я проверяю и добавляю вручную word-break:break-all это наполовину работает. Я делаю что-то не так или есть ошибка?

2) Часть "это наполовину работает": если вы посмотрите на скрипку, добавьте вручную word-break:break-allОн добавляет пару букв из ссылки в конец абзаца, а затем сохраняет оставшуюся часть ссылки под черным квадратом (это изображение в исходном коде). Но теперь удалите часть lorem ipsum, чтобы последняя строка текста прошла примерно на полпути, а затем вручную добавьте word-break:break-all и он действительно сделает то, что должен. Зачем? И может кто-нибудь придумать обходной путь? Как всегда, спасибо за помощь.

*** Также стоит отметить, что IE по-прежнему не будет сотрудничать с этим стилем CSS-трюка. .link поэтому я добавил word-wrap:break-word в .post и теперь он сотрудничает. Попробовал это и для Chrome, хотя до сих пор ничего не вышло. Я не понимаю, почему это работает на .sm-post и не .link, Блок элемент против встроенного? Любые слова мудрости по этому поводу тоже будут полезны.

Answer 1

Ваш CSS испорчен, видите

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

Ширина вашего контейнера слишком мала для содержимого

.sm-content{ width:700px; }

и вам нужно пропустить текстовое содержимое слева

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

Вы можете отрегулировать ширину по своему усмотрению, но убедитесь, что она подходит к контейнеру. Поскольку ваше изображение является плавающим, текстовое содержимое не так, чтобы текстовый контейнер фактически перекрывался с изображением. Если вы используете инспекцию в Chrome, вы можете увидеть расположение блока при наведении на элементы