单行文本溢出和多行文本溢出的解决方案

  /* 单行文本溢出隐藏 省略号代替 */ 
/*文本text是内联元素,内联元素使用overflow: hidden;不生效  内联元素依靠子元素撑开没有能力切割元素,所以需要加display:block */
display: block;
/* 不换行 */
white-space: nowrap;
overflow: hidden; 
text-overflow: ellipsis;

  /* 多行文本溢出隐藏 省略号代替*/
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;   /*设置对其模式*/
  -webkit-line-clamp: 2;    /*设置多行的行数*/
 
posted @   婷宝_知萌  阅读(50)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· winform 绘制太阳,地球,月球 运作规律
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· AI与.NET技术实操系列(五):向量存储与相似性搜索在 .NET 中的实现
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
点击右上角即可分享
微信分享提示