Question

我正在尝试使用长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.               |
|__________________________|

我尝试过“断言：打破一切;”但是，当然，这会破坏每一行，通常是中间词。

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

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

任何人都知道更优雅的解决方案吗？

干杯。

Answer 1

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

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

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

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

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

如果你的链接是第一个文本，也许像这样的技巧可以工作：

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

Answer 2

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

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

FIDDLE

用浮动图像包裹div中的长href

2 个答案: