37

幅が 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;
}
4

6 に答える 6

48

ラッピングは様々な方法で行うことができます。私はそれらのうちの2つに言及します：

1.) テキストの折り返し - 空白のプロパティを使用http://www.w3schools.com/cssref/pr_text_white-space.asp

2.) ワード ラッピング - word-wrap プロパティを使用http://webdesignerwall.com/tutorials/word-wrap-force-text-to-wrap

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

しかし、キリルが既に述べたように、少し考えてみると良いでしょう。テキストを段落に強制することについて話している。段落。それはあなたの頭の中でいくつかの鐘を鳴らすはずですよね？;)

于 2012-06-24T23:19:14.133 に答える
7

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

Example:
    legend {
        display:table; /* Enable line-wrapping in IE8+ */
        white-space:normal; /* Enable line-wrapping in old versions of some other browsers */
    }
于 2016-03-17T02:06:00.890 に答える
3

私は IE6 で動作するはずのソリューションを持っています (そして 7 以降と FireFox/Chrome でも確実に動作します)。
a を使用して正しい軌道に乗っていましたspanが、 a の使用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。/などでした）。divaspandisplayblockdivp

于 2013-09-23T08:30:34.523 に答える
2

試す

.test {
white-space:pre-wrap;
}
<a class="test" 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>

于 2020-08-31T21:06:45.503 に答える
-3

スパン内の別の div にテキストを配置してみてください。

すなわち

<span><div>some text</div></span>
于 2012-06-24T23:22:05.190 に答える