如何在跨度中包装文本？

Question

我有一个350像素宽的跨度.如果有比这更多的文本,它只是直接向右侧移到跨度的一侧.如何强制文本包装成段落？我尝试过各种各样的东西,我在网上找到了,似乎没什么用.

这需要适用于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;
}

Answer 1

包装可以以各种方式完成.我会提到其中两个:

1.)文本换行 - 使用空白属性http://www.w3schools.com/cssref/pr_text_white-space.asp

2.)自动换行 - 使用自动换行属性http://webdesignerwall.com/tutorials/word-wrap-force-text-to-wrap

顺便说一句,为了使用这两种方法,我相信你需要设置"display"属性来阻止相应的span元素.

然而,正如基里尔已经提到的那样,暂时考虑它是一个好主意.你在谈论强迫文本成一个段落.段.这应该会在你的头脑中响起一些铃声,不应该吗？;)

Answer 2

您应该将空白与显示表一起使用

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

Answer 3

尝试

.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>