css 超出一行显示省略号，table-cell溢出

最新推荐文章于 2025-04-27 16:54:52 发布

街边吃垃圾

最新推荐文章于 2025-04-27 16:54:52 发布

阅读量4.3k

点赞数

分类专栏： css超出一行文章标签： css table-cell 溢出

本文链接：https://blog.youkuaiyun.com/zhangjing0320/article/details/78974549

版权

css超出一行专栏收录该内容

1 篇文章

订阅专栏

本文介绍了使用CSS解决文本溢出的问题，通过两个实例展示了如何让超出容器的文本显示为省略号，包括使用div模拟table-cell布局的方法。

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

两个实例，可以直接复制运行。

代码如下

<div class="circle">
    11111123456789
</div>
<style>
.circle {
    width: 100px;

    overflow: hidden;   /*超出隐藏*/
    white-space: nowrap; /*强制在同一行显示*/
    text-overflow: ellipsis; /*省略号*/
}
</style>

效果：

这里写图片描述

关于table-cell溢出问题

<div class="test">
    <div class="item">11111222333444</div>
</div>

<style type="text/css">
.test {
    width: 100px;

    display: table;
    table-layout:fixed;  /*table-layout用来显示表格单元格、行、列的算法规则,fixed表示水平布局仅取决于表格宽度，不填这一项代表水平布局取决于内容*/

    border: 1px solid red;
}

.item {
    width: 100%;
    display: table-cell;

    overflow: hidden;
    word-spacing: nowrap;
    text-overflow: ellipsis;
}
</style>