我需要打断长词,例如长链接。我正在处理的布局是流体布局,因此没有提供固定宽度。取而代之的是,我需要我的文本块来适应任何容器的宽度并打破长字,以便它们适应任何宽度。
您在http://jsfiddle.net/cYDJd/1/有一个示例,其中您将看到一个长链接,该链接没有被 CSS 规则破坏,word-wrap: break-word;
而图像在左侧浮动。只有当长链接位于图像下方时,才能word-wrap
正常工作。
这里有 JSFiddle 代码的简化版本:
CSS:
.left {
float: left;
}
.justified-block {
text-align: justify;
word-wrap:break-word;
}
HTML:
<a href="#" class="left"><img src="some-image.jpg" /></a>
<p class="justified-block">Some text with a very loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong link.</p>
我将非常感谢您的友好建议。