css - 用 float 图像将长 href 包裹在 div 中

Question

我正在尝试将文本环绕在 float 图像周围，并将长 href 作为文本的一部分。

我可以让文本换行没有问题，但是当我添加一个长链接(其宽度超过 float 图像的宽度)时，该链接被强制位于 float 图像下方。

所以这样:

 __________________________
| text text text   _____   |
| text text text  |     |  |
| text text text  |_____|  |
| text text text           |
| text text text text text |
| text text.               |
|__________________________|

变成这样:

 __________________________
| text text text   _____   |
| text text text  |     |  |
| text text       |_____|  |
|                          |
| <this is the link> text  |
| text text text text text |
| text.                    |
|__________________________|

我想要的地方:

 __________________________
| text text text   _____   |
| text text text  |     |  |
| text text <this |_____|  |
| is the link>             |
| text text text text text |
| text text.               |
|__________________________|

我试过“断字:全部中断；”但当然，这会打破每一行，通常是中间词。

我考虑过使用 JavaScript 在“a”标签的文本部分中的协议(protocol)、域、扩展和任何 uri 参数之后插入“”标签，但我希望有一个 CSS 解决方案，如果有的话存在。

这是难题的 JSFiddle http://jsfiddle.net/vBbau/2/ .

有人知道更优雅的解决方案吗？

干杯。

Answer 1

这不是“链接”问题。这是因为链接的内部 html 被认为是一个没有空格的大词。所以大词必须适合而不破坏自己。

如果你在链接外尝试一个大词作为纯文本，它也会破坏 float 。

仅将 break-all 应用于链接，因此它会成功:

.container .content a{
    word-break:break-all;
}

JSfiddle:http://jsfiddle.net/qR46N/1/

如果您的链接是第一个文本，也许这样的技巧可以奏效:

JSfiddles:http://jsfiddle.net/qR46N/3/