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

0

別のクラスを作成し<a>、次の css を適用します

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

フィドル

于 2013-07-14T13:14:09.203 に答える