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元素。

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

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

我有一个适用于IE6的解决方案（绝对适用于7+和FireFox / Chrome）。
您使用span走在正确的轨道上，但使用ul是错误的并且css不对。

Try this

<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，这样它就会像{{1}那样换行} / div等。）

Answer 4

尝试

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

Answer 5

尝试将您的文字放入范围内的另一个div中：

即

<span><div>some text</div></span>

如何在跨度中包装文本？

5 个答案: