web-dev-qa-db-ja.com

スパンでテキストをラップするにはどうすればよいですか？

幅が350ピクセルのスパンがあります。それ以上のテキストがある場合は、スパンの右側に向かってまっすぐに出ます。テキストを強制的に段落にまとめるにはどうすればよいですか？ Webで見つけたさまざまなことを試しましたが、何もうまくいかないようです。

これはIE 6以降で動作する必要があります。Firefoxでも動作するのであれば良いでしょう。

更新：

ここにもう少し情報があります。ツールチップを実装しようとしています。私のコードは次のとおりです。

[〜＃〜] html [〜＃〜]

<td style="text-align:left;" nowrap="nowrap" class="t-last">
    <a class="htooltip" href="#">
        Notes<span style="top: 40px; left: 1167px; ">
            <ul>
                <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.</li>
            </ul>
        </span>
    </a>
</td>

[〜＃〜] css [〜＃〜]

.htooltip, .htooltip:visited, .tooltip:active
{
    color: #0077AA;
    text-decoration: none;
}

.htooltip:hover
{
    color: #0099CC;
}

.htooltip span
{
    display: inline-block;

    /*-ms-Word-wrap: normal;*/
    Word-wrap: break-Word;

    background-color: black;
    color: #fff;
    padding: 5px 10px 5px 40px;
    position: absolute;
    text-decoration: none;
    visibility: hidden;
    width: 350px;
    z-index: 10;
}

.htooltip:hover span
{
    position: absolute;
    visibility: visible;
}
htmlcssinternet-explorerword-wrap
24
birdus

ラッピングはさまざまな方法で実行できます。それらのうち2つについて説明します。

1.）テキストの折り返し-ホワイトスペースプロパティを使用 http://www.w3schools.com/cssref/pr_text_white-space.asp

2.）ワードラップ-ワードラッププロパティを使用 http://webdesignerwall.com/tutorials/Word-wrap-force-text-to-wrap

ところで、これらの2つのアプローチを使用して動作するためには、「display」プロパティを対応するspan要素のブロックに設定する必要があると思います。

ただし、、キリルがすでに述べたように、少し考えてみることをお勧めします。テキストを段落に強制することについて話している。パラグラフ。それはあなたの頭の中でいくつかの鐘を鳴らすはずですよね？ ;）

39
walther

表示テーブルには空白を使用する必要があります

Example:
    legend {
        display:table; /* Enable line-wrapping in IE8+ */
        white-space:normal; /* Enable line-wrapping in old versions of some other browsers */
    }
4
Quy Le

私はIE6で動作するはずのソリューションを持っています（そして間違いなく7+とFireFox/Chromeで動作します）。
あなたはspanを使用して正しい軌道に乗っていましたが、ulの使用は間違っていて、CSSは正しくありませんでした。

試してみてください

<a class="htooltip" href="#">
    Notes

    <span>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.
    </span>
</a>

.htooltip, .htooltip:visited, .tooltip:active {
    color: #0077AA;
    text-decoration: none;
}

.htooltip:hover {
    color: #0099CC;
}

.htooltip span {
    display : none;
    position: absolute;
    background-color: black;
    color: #fff;
    padding: 5px 10px 5px 40px;
    text-decoration: none;
    width: 350px;
    z-index: 10;
}

.htooltip:hover span {
    display: block;
}

誰もがこれについて間違った方法で行っていました。コードは有効ではありません。ulはaに入れません、pはaに入れません、divはaに入れません、単にspanを使用します（displayとしてblockにすることを忘れないでください。したがって、div/pなどであるかのようにラップされます。

3
Hashbrown