37

我有一个 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;
}
4

6 回答 6

48

包装可以通过多种方式完成。我会提到其中的两个：

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

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

顺便说一句，为了使用这两种方法，我相信您需要将“显示”属性设置为相应 span 元素的块。

然而，正如基里尔已经提到的，考虑一下是个好主意。您正在谈论将文本强制转换为段落。段落。这应该在你的脑海中敲响一些钟声，不是吗？;)

于 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，但是使用 aul是错误的，并且 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's ca n't go in 's a, 's ca pn't go in a's, div'ca n't go in 's ,a用a是/等）。spandisplayblockdivp

于 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 回答
1

如果它是一个没有空格的大词，你可以使用overflow-wrap: break-word;

.text {
  overflow-wrap: break-word;
}
<span class='text'>
Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam,quisnostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.Duisauteiruredolorinreprehenderitinvoluptatevelitessecillumdoloreeufugiatnullapariatur.Excepteursintoccaecatcupidatatnonproident,suntinculpaquiofficiadeseruntmollitanimidestlaborum.
</span>

于 2022-01-28T21:45:55.027 回答
-3

尝试将您的文本放在跨度内的另一个 div 中：

IE

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