Html 如何在跨度中包装文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11181920/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I wrap text in a span?
提问by birdus
I've got a span that's 350 pixels wide. If there's more text than that, it just goes straight out to the right off to the side of the span. How do I force the text to wrap down into a paragraph? I've tried a variety of things which I've found on the web, and nothing seems to work.
我有一个 350 像素宽的跨度。如果有更多的文本，它会直接从右边移到跨度的一侧。如何强制文本换行成一个段落？我已经尝试了我在网上找到的各种东西，但似乎没有任何效果。
This needs to work for IE 6 onward. It would be good if it worked in Firefox, too.
这需要适用于 IE 6 以后。如果它也适用于 Firefox，那就太好了。
UPDATE:
更新：
Here's a little more info. I'm trying to implement a tooltip. Here's my code:
这里有更多信息。我正在尝试实现工具提示。这是我的代码：
HTML
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
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;
}
回答by walther
Wrapping can be done in various ways. I'll mention 2 of them:
包装可以通过多种方式完成。我会提到其中的两个：
1.) text wrapping - using white-space property http://www.w3schools.com/cssref/pr_text_white-space.asp
1.) 文本换行 - 使用空白属性http://www.w3schools.com/cssref/pr_text_white-space.asp
2.) word wrapping - using word-wrap property http://webdesignerwall.com/tutorials/word-wrap-force-text-to-wrap
2.) 自动换行 - 使用自动换行属性http://webdesignerwall.com/tutorials/word-wrap-force-text-to-wrap
By the way, in order to work using these 2 approaches, I believe you need to set the "display" property to block of the corresponding span element.
顺便说一句，为了使用这两种方法，我相信您需要将“display”属性设置为相应 span 元素的块。
However, as Kirill already mentioned, it's a good idea to think about it for a moment. You're talking about forcing the text into a paragraph. PARAGRAPH. That should ring some bells in your head, shouldn't it? ;)
但是，正如 Kirill 已经提到的，暂时考虑一下是个好主意。您正在谈论将文本强制转换为段落。段落。这应该在你的脑海中响起，不是吗？;)
回答by Hashbrown
I've got a solution that should work in IE6 (and definitely works in 7+ & FireFox/Chrome).
You were on the right track using a span, but the use of a ulwas wrong and the css wasn't right.
我有一个应该在 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;
}
Everyone was going about this the wrong way. The code isn't valid, ul's cant go in a's, p's can't go in a's, div's cant go in a's, just use a span(remembering to make it displayas a blockso it will wrap as if it were a div/petc).
每个人都以错误的方式解决这个问题。该代码是无效的，ul的在不能去aS'，p's不能进去a的，div的在不能去aS'，只使用一个span（记住使它display为block所以它会包裹，如果它是div/p等）。
回答by Quy Le
You should use white-space with display table
您应该将空白与显示表一起使用
Example:
legend {
display:table; /* Enable line-wrapping in IE8+ */
white-space:normal; /* Enable line-wrapping in old versions of some other browsers */
}
回答by David Cheung
Try putting your text in another div inside your span:
尝试将您的文本放在跨度内的另一个 div 中：
i.e.
IE
<span><div>some text</div></span>
