标签：... 2211708 center text overflow 文本 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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。