nowrap 对span 不彻底管用

最新推荐文章于 2024-08-28 13:33:06 发布

原创最新推荐文章于 2024-08-28 13:33:06 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

html+js+jquery+css 专栏收录该内容

644 篇文章

订阅专栏

本文介绍了一种使用CSS实现的文本溢出省略显示方法，通过设置white-space、overflow及text-overflow属性，可以使得过长的文本在显示区域外被省略号(...)代替。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

.no, .nowrap {

    white-space: nowrap; //是否换行，不换行，单行
    overflow: hidden; //超出父类会截取隐藏
    -o-text-overflow: ellipsis; //后面加...
    text-overflow: ellipsis;
}

<span class="chapter nowrap">
    <a href="http://mangafox.me/manga/world_trigger/vTBD/c164/1.html" class="chapter">World Trigger 164World Trigger 164World Trigger 164World Trigger 164World Trigger 164World Trigger 164World Trigger 164World Trigger 164World Trigger 164World Trigger 164World Trigger 164</a> vTBD
</span>

<div class="chapter nowrap">
    <a href="http://mangafox.me/manga/world_trigger/vTBD/c164/1.html" class="chapter">World Trigger 164World Trigger 164World Trigger 164World Trigger 164World Trigger 164World Trigger 164World Trigger 164World Trigger 164World Trigger 164World Trigger 164World Trigger 164</a> vTBD
</div>