文本溢出后，自动转成...

最新推荐文章于 2024-04-01 15:08:15 发布

Zeng__Y1

最新推荐文章于 2024-04-01 15:08:15 发布

阅读量411

点赞数

分类专栏： Css 文章标签：文本溢出

本文链接：https://blog.csdn.net/Zeng__Yi/article/details/80255382

版权

Css 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

让文本实现溢出后实现（...）主要是三个样式：

white-space:nowrap是文本强制不换行；

overflow：hidden 溢出文本隐藏；

text-overflow：ellipsis 溢出部分省略；

.text1 {
    width: 200px;
    padding: 5px;
    border: 1px solid black;
    line-height: 20px;
}
.text2 {
    width: 200px;
    padding: 5px;
    border: 1px solid black;
    line-height: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

<div class="text">
    <h1>没有应用样式</h1>
    <div class="text1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aperiam asperiores aut
        dignissimos distinctio
        error explicabo fugit hic id ipsum modi molestiae nam nemo omnis quidem quos, repellat, saepe voluptas!
    </div>
    <h1>应用了样式</h1>
    <div class="text2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aperiam asperiores aut
        dignissimos distinctio
        error explicabo fugit hic id ipsum modi molestiae nam nemo omnis quidem quos, repellat, saepe voluptas!
    </div>
</div>

实现的效果：

-------------------------------------------------------------------------------------------------------------------------------------------------------------------如遇到问题：+WX：WAZJ-0508，及时联系---------------------------------------------------------------------------------------------------------------------------------------------------