在浮動圖像div div中包裝long href

我想圍繞浮動圖像與長href作爲文本的一部分的文字。在浮動圖像div div中包裝long 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在「a」標籤的文本部分中插入「< wbr/>」標籤後的協議，域，擴展名和任何uri參數，但希望獲得CSS解決方案if一個存在。

這裏是難題http://jsfiddle.net/vBbau/2/的的jsfiddle。

任何人都知道更優雅的解決方案嗎？

乾杯。

來源

2013-07-14 Eclectic

這不是一個「鏈接」的問題。這是因爲鏈接的內部html被認爲是沒有空間的一個大字。所以這個大詞一定要合適，不要自行破壞。

如果您在鏈接之外嘗試使用純文本，它也會打破浮動。

應用突破都只是鏈接，所以它會成功：

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

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

如果你的鏈接是第一個文本，也許這樣一招可以工作：

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

來源

2013-07-14 13:37:11 CtrlX

這幾乎是完美的。我不知道我爲什麼沒有想到自己！雖然我收到了一些奇怪的結果。如果內容以'a'標籤開始（沒有內容或空間處理它），那麼破解並沒有做任何事情。在標籤之前插入任何空格也無濟於事。在'a'標籤之前插入一些_text_和一個空格_does_ work。如果內容以一個'a'標籤開始，並且該解決方案始終如一地工作，我寧願不必這樣做：/ 任何想法？我想在容器的開始處插入字符串'Goto' （Chrome 28.0.1500.72米）。 – Eclectic

的確，這是一個奇怪的事情......用自制的招數我已經更新。不是一個非常聰明的人，但它能完成這項工作！ – CtrlX

的突破校正想法運作良好，感謝您的;）我已經實現了類似的做法，所有看起來不錯。 – Eclectic

爲<a>創建另一個類，並應用下面的CSS

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

FIDDLE

來源

2013-07-14 13:14:09

感謝您的答覆，但在這種情況下，容器是有求必應，因此迫使任何寬度最終會找誰克奇。 – Eclectic

在浮動圖像div div中包裝long href

回答

相關問題