9

リンクをコンパクトな四角形に含めながら、HTML リンク内の非常に長いテキストをラップできるようにする方法を見つけようとしています。

基本的に、私はこれが欲しい：

                      本当に、本当に
    ここにラップするテキストの長いリンクが   あり、ここにいくつかのテキストがあります。
                      四角で囲う

それ以外の：

これは、四角形で折り返された非常に長いリンクを
   含む   テキストと、さらにテキストです。

これどうやってするの？

4

4 に答える 4

10

Firefoxではこのように行うことができます-IEでは機能しませんが:(

<p>Here is some text <a href="#">with a really, really long link that wraps</a> around in a rectangle and here is some more text.


<style type="text/css">

a {display: inline-block; max-width: 100px; vertical-align: middle;}

</style>
于 2009-03-14T20:38:39.160 に答える
9

私はこれがかなり古いことを知っていますが、それはまだこの件に関して私に出てきた最初の検索結果の1つでした. 私はそれを使用して見つけました：

white-space: pre-wrap;

アンカーが幅制限の周りにテキストを折り返すように強制しました

于 2014-10-21T19:56:32.933 に答える
1

リンクでcssプロパティを使用するdisplay:inline-block;と、希望どおりの効果が得られます（幅を設定することを忘れないでください:)。

display：inline-blockはIEでサポートされていませんが、幸運なことに、誰かがすでにハードワークを実行し、ここで回避策を考え出しました。

于 2009-03-14T20:46:48.220 に答える
1

ブートストラップを使用していたため、この問題が発生しました。デフォルトでは、これをスタイルの1つとして設定していました

.dropdown-menu > li > a{
    white-space: nowrap;
}

「word-break」および「width」CSSプロパティが実際に問題を解決するのを妨げたのはどれですか

そのため、最初に空白のプロパティを「pre-wrap」に設定する必要がありました

于 2015-06-15T20:32:18.153 に答える