CSS：将自动换行断词应用于具有浮动图像的流体宽度文本答案

【问题标题】：CSS: apply word-wrap break-word to fluid width text with floating imageCSS：将自动换行断词应用于具有浮动图像的流体宽度文本
【发布时间】：2013-10-05 11:28:40
【问题描述】：

我需要打断长词，例如长链接。我正在处理的布局是 fluid-layout，因此没有提供固定宽度。取而代之的是，我需要我的文本块适应任何容器的宽度并打破长字，以便它们适应任何宽度。

您在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>

非常感谢您的好意建议。

【问题讨论】：

可能重复：stackoverflow.com/questions/6855979/…
谢谢安迪。我只是希望用 CSS 而不是 PHP 来解决它。无论如何，目前我会接受 Susam 的脚本作为解决方案 (stackoverflow.com/a/6856297/2253064)，但我将使用 &shy;，因为 Opera 尚不支持 <wbr>。

标签： css css-float word-wrap fluid-layout text-justify

【解决方案1】：

这样的？

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

http://jsfiddle.net/insan3/nrQFQ/2/

<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>

【讨论】：