CSS：将换行符单词应用于具有浮动图像的流体宽度文本

我需要打破长期的话，例如长链接。我正在处理的布局是流体布局，因此没有提供固定宽度。相反，我需要我的文本块调整到任何容器的宽度，将长单词打断，以便它们可以调整到任何宽度

您有一个示例，在其中您将看到一个长链接，它没有被CSS规则

wordwrap:break-word破坏当图像在左侧浮动时。只有当长链接位于图像下方时，
wordwrap
才能正常工作

这里是JSFiddle代码的简化版本：

CSS:

HTML:


一些文本带有一个非常糟糕的链接

非常感谢您的建议。
像这样的建议

我没有检查任何浏览器支持：/



.街区{
宽度：200px；
显示：块；
边框：1px实心#DDD；
显示：表格；
}
.a座{
文本转换：大写；
}
.s1x{字体大小：10px；}
.s2x{字体大小：14px；}
.s3x{字体大小：16px；}
.断字{
单词包装：打断单词；
单词break：打破一切；
}


像这样的事

我没有检查任何浏览器支持：/



.街区{
宽度：200px；
显示：块；
边框：1px实心#DDD；
显示：表格；
}
.a座{
文本转换：大写；
}
.s1x{字体大小：10px；}
.s2x{字体大小：14px；}
.s3x{字体大小：16px；}
.断字{
单词包装：打断单词；
单词break：打破一切；
}


可能重复：谢谢你，安迪。我只是希望用CSS而不是PHP来解决这个问题。无论如何，目前我将接受Susam的脚本作为解决方案（），但我将使用
­为
。可能重复：谢谢，安迪。我只是希望用CSS而不是PHP来解决这个问题。无论如何，目前我将接受Susam的脚本作为解决方案（），但我将使用
­作为
。
.left {
    float: left;
}
.justified-block {
    text-align: justify;
    word-wrap:break-word;
}

<a href="#" class="left"><img src="some-image.jpg" /></a>
<p class="justified-block">Some text with a very loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong link.</p>

<style>
.block{
 width: 200px;
 display: block;
 border: 1px solid #DDD;
 display: table;
}

.block a{
 text-transform: uppercase;
}
.s1x{ font-size: 10px;}
.s2x{ font-size: 14px;}
.s3x{ font-size: 16px;}

.word-break{
 word-wrap: break-word;
 word-break: break-all;
 }
 </style>

<span class="block">
<p class="word-break"><a class="s1x" href="#">&bull;Current Lipsum Content Link Here it &bull;</a><a class="s3x" href="#">Current Lipsum Content Link Here it Current&bull;</a><a class="s1x" href="#"> Lipsum Content Link Here it Current Lipsum Content Link Here&bull;</a> <a class="s3x" href="#">it Current Lipsum Content Link Here it Current Lipsum Content Link Here it&bull;</a></p>