html - 親より大きいリンク テキスト

Question

div があり、その div 内にリンクがあります

<div class="something">
<a href="#">Databases</a>
</div>

問題は、div の幅を設定すると、リンクのテキストの幅よりも小さくなることです。リンクのテキストは、親 div の外に出ます。

私が欲しいのは、テキストが改行されることです。

どうすればこれを修正できますか?

Answer 1

CSSword-breakルールを使用します。

a {
    word-break:break-all;
}

jsFiddle の例

Answer 2

これを試して

a{
    white-space: pre-wrap;
    word-wrap: break-word; 
}

JsFiddle デモ

Answer 3

word-breakプロパティはアンカー<a>タグで使用する必要があります。

a{
    word-break: break-all;
}

このドキュメントで説明されているように、これは

「通常の」ソフト ラップの機会に加えて、任意の 2 文字間で改行することができます (「改行」プロパティで禁止されている場合を除く)。ハイフネーションは適用されません。

これにより、テキストがコンテナーの境界に達するたびに単語が分割され、新しい行に分割されます。

Answer 4

複数の単語と同じように、CSS を使用してブラウザに単語を分割するように指示できます。

.something{word-wrap: break-word;}

Answer 5

.something a {
    /* see http://stackoverflow.com/a/7256972/315935 for details */
    word-wrap: break-word;      /* IE 5.5+ and CSS3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap;     /* Opera 4-6 */
    white-space: -o-pre-wrap;   /* Opera 7 */
    white-space: pre-wrap;      /* CSS3 */
    overflow: hidden;
    height: auto !important;
    vertical-align: middle;
}