我有一个 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;
}
原文由 birdus 发布,翻译遵循 CC BY-SA 4.0 许可协议
包装可以通过多种方式完成。我会提到其中的两个:
1.) 文本换行 - 使用空白属性 http://www.w3schools.com/cssref/pr_text_white-space.asp
2.) 自动换行 - 使用自动换行属性 http://webdesignerwall.com/tutorials/word-wrap-force-text-to-wrap
顺便说一句,为了使用这两种方法,我相信您需要将“显示”属性设置为相应跨度元素的块。
然而,正如 Kirill 已经提到的,稍微考虑一下是个好主意。您是在谈论将文本强制放入一个段落中。段落。那应该在您的脑海中响起一些铃声,不是吗? ;)