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/

chrome中的两个问题：

1）即使使用word-break:break-all前缀，Chrome也无法读取-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仍然不会在.link上使用这个css-trick样式，所以我将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中使用inspect，则可以在将鼠标悬停在元素上时看到框布局

chrome中的分词不一致

1 个答案: