1.单行
效果图：
width:335px;//定宽
overflow: hidden; //超出的文本隐藏
text-overflow: ellipsis; //溢出用省略号显示
white-space: nowrap; // 默认不换行；注：必须要定一个宽度。
2.多行
效果图：
文章来源：https://www.toymoban.com/news/detail-808137.html
width:335px;
overflow: hidden; //超出的文本隐藏
display: -webkit-box;
-webkit-line-clamp: 2; // 设置从第几行后开始省略
-webkit-box-orient: vertical;注：必须要定一个宽度。
以上代码就能实现上面的效果文章来源地址https://www.toymoban.com/news/detail-808137.html
到了这里，关于css超出显示...（单行、多行）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
![[HTML]Web前端开发技术11（HTML5、CSS3、JavaScript ）页面布局设计 “三行模式”或“三列模式”“三行二列”“三行三列”模式 多行多列复杂模式水平导航菜单——喵喵画网页](https://imgs.yssmx.com/Uploads/2024/02/787720-1.png)
