logo标签列表

如何在 span 中包裹文本？

htmlcssinternet-explorerword-wrap
40

我的一个 span 宽度为 350 像素。如果里面的文本超过了这个宽度，它就会直接出现在 span 的右侧。我该如何强制文本换行成段落呢？我尝试过一些从网上找到的方法，但都没有用。

这个问题需要在 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
Span是一个内联元素。通常不应该对这样的对象施加宽度限制。请使用<p>或<div>并设置CSS。 - Kirill Kobelev
你在 span 标签中设置了 white-space 属性吗？ - David Cheung
空格是我尝试过的一件事情。 - birdus
将<p>放在<span>中并设置其宽度似乎也无法使文本换行。 - birdus
@birdus，可能是因为p不能[合法地]放在span中。即使你提出问题的原因已经过去很久了，你能看一下我的答案（只需点击链接）并确认它是否有效吗？如果不行，请给我留言评论一下。 - Hashbrown
6个回答
50

换行可以通过不同的方式实现。我将提及其中的两种：

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

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

顺便说一下，为了使用这两种方法，我认为您需要设置相应 span 元素的 "display" 属性为 block。

然而，正如 Kirill 已经提到的，想一想是一个好主意。你正在强制文本成为段落。段落。这应该在你的脑海中引起一些警钟，不是吗？;)

3
就像我之前所说的，把文本放在<p>标签里面并将其嵌套在<span>标签中，它仍然没有换行。我也已经尝试了white-space和word-wrap属性，但它们没有产生作用。 - birdus
@birdus，请在您的浏览器开发工具中查看与您的设置冲突的相应CSS规则，因为它默认情况下是可以工作的。我刚验证了一下，以确保自上次检查以来没有更改，还有一个亿的确定度。不要把p放在span里面，这没有任何意义。使用简单的段落代替。不知道为什么您有将其放入span的冲动。如果仍然无法正常工作，恐怕您需要提供实际代码+实时示例，以便我们进行检查。 - walther
这个 span 不是我想要的。只是在寻找工具提示代码时在网上找到的。 - birdus
2
我点赞了这个回答，因为其中的“然而”提醒了我，让我意识到自己正在做一件愚蠢的事情。 :-) - R. Michael Rogers
对我来说，white-space属性是一个解决方案 .wrap{ white-space: normal; } （我有一个固定宽度的父级div和一个长文本的子级，需要换行并多行显示） - lyolikaa
7
您应该在display table中使用white-space属性。
Example:
    legend {
        display:table; /* Enable line-wrapping in IE8+ */
        white-space:normal; /* Enable line-wrapping in old versions of some other browsers */
    }
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>

3
我有一个解决方案，可以在IE6中使用（在7+和FireFox / Chrome中肯定有效）。您之前使用了标签，但是使用
    标签是错误的，并且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不能放在中，p不能放在中，div不能放在中，只需使用（记得将其显示为block，这样它将像div/p一样换行）。
1
如果是没有空格的长单词，可以使用overflow-wrap: break-word;。 

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

-3
尝试将您的文本放置在 span 元素内的另一个 div 中：
例如：
<span><div>some text</div></span>
那也不起作用。所有这些让我想知道是否有一些奇怪的东西阻止它们做它们应该做的事情。 - birdus
检查你的 CSS……还有 HTML，请确保没有任何缺失的标签。 - David Cheung
17
在HTML中，一个<span>标签内部不能包含一个<div>标签，这是无效的HTML格式。（参考：http://www.w3.org/TR/REC-html40/struct/global.html#h-7.5.4） - Mido
1
这是无效的代码，您不应该将块元素作为内联元素的子元素。 - John
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接