html – 如何在跨度中包装文本?

前端之家收集整理的这篇文章主要介绍了html – 如何在跨度中包装文本?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个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;
}

解决方法

包装可以通过各种方式完成.我会提到其中2个:

1.)文本包装 – 使用空格属性http://www.w3schools.com/cssref/pr_text_white-space.asp

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

顺便说一句,为了使用这两种方法,我相信你需要将“显示属性设置为对应的span元素.

但是,正如基里尔已经提到的那样,想一会儿是一个好主意.你正在谈论强制文本到一个段落.段.那应该在你头上响了一些钟声,不是吗?

猜你在找的HTML相关文章