代码:overflow: hidden; text-overflow: ellipsis;

overflow: hidden;//当容器中的内容超出容器的尺寸时,将隐藏超出部分而不显示滚动条。

display: -webkit-box;//使用WebKit引擎的浏览器(如Chrome和Safari)中,将容器的显示方式设置为弹性盒子布局。

-webkit-line-clamp: 1;//在WebKit引擎的浏览器中,限制文本内容显示的行数为1行。这样,如果文本内容超出一行,超出部分将被隐藏。

-webkit-box-orient: vertical;//在WebKit引擎的浏览器中,将弹性盒子的主轴方向设置为垂直方向。这样,文本内容将按照垂直方向进行布局。

text-overflow: ellipsis;//当文本内容超出容器的尺寸时,显示省略号(…)来表示被隐藏的部分。

效果: