css实现文本超出隐藏，使用(...)来代替

1.css核心代码

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: center;
display: inline-block;
2.例子
1.html
<div class="box">
        <div class="item">122</div>
        <div class="item">133</div>
        <div class="item">亲爱的撒娇阿克苏鸡大吉四代机的撒啊是大家大厦</div>
        <div class="item">1444</div>
        <div class="item">11231</div>
</div>

2.css代码
        <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: skyblue;
        }

        .item {
            width: 150px;
            height: 30px;
            background-color: orange;
            /* 以下代码--中心 */
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            text-align: center;
            display: inline-block;
        }
</style>

3.效果
![image](https://www.icode9.com/i/l/?n=22&i=blog/2211708/202207/2211708-20220711141609498-23640776.png)
点击查看效果：[css实现文本超出隐藏且出现...](https://www.icode9.com/i/l/?n=22&i=blog/2211708/202207/2211708-20220711141609498-23640776.png "css实现文本超出隐藏且出现...")

标签：...,2211708,center,text,overflow,文本,css
来源： https://www.cnblogs.com/songkomei/p/16466259.html