使用text-overflow:ellipsis实现文字不全显示，使用...代替

话不多说，先上成果

开始的样子，这样方框的大小不同，很不美观。

源代码

            

                

                    

                        
Card title
                        
#
                        点击查看详细
                    
                
            

第一步：不换行
在标题的div标签加ccs样式，不允许换行：white-space:nowrap;

让内容不换行，效果如图，现在的效果就比较差了

第二步：隐藏超出
为了让内容不撑开容器，显示到外面。我们为div标签再添加css样式：overflow: hidden;

隐藏超出的内容，效果如下。其实已经能看了，但是少点逼格

第三步：添加省略号
为了让用户知道，这里的内容隐藏了部分，我们为div标签再添加css样式：text-overflow: ellipsis;

来让其在后面添加上省略号，效果如下。就和我们的目标一致了