3

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

我可以让文本换行没有问题，但是当我添加一个长链接（其宽度超过浮动图像的宽度）时，链接被强制低于浮动图像。

所以这：

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

我试过“word-break：break-all;” 但当然，这会破坏每一行，通常是中间词。

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

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

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

干杯。

4

2 回答 2

1

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

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

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

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

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

如果您的链接是第一个文本，那么这样的技巧可能会起作用：

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

于 2013-07-14T13:37:11.130 回答
0

<a>为以下 css创建另一个类并应用

.container .content a{
        display: inline-block; 
         max-width: 130px; 
         vertical-align: middle;
    }

小提琴

于 2013-07-14T13:14:09.203 回答