CSS 文字溢出:多行溢出、一行溢出

CSS 文字溢出:多行溢出、一行溢出

案例请点击查看文章详情。


代码如下:

  • 多行溢出设置:

    css 复制代码
    .line-clamp-2{
    	/* height: 52px;
    	line-height: 25px; */
    	overflow: hidden;
    	word-break: break-all;
    	text-overflow: ellipsis;
    	display: -webkit-box;
    	-webkit-line-clamp: 2;
    	-webkit-box-orient: vertical;
    }
  • 单行溢出设置:

    css 复制代码
    line-height: 25px;
    overflow: hidden;(文字长度超出限定宽度,则隐藏超出的内容)
    white-space: nowrap;(设置文字在一行显示,不能换行)
    text-overflow: ellipsis;(规定当文本溢出时,显示省略符号来代表被修剪的文本)

    text-overflow: ellipsis; 文本溢出隐藏

相关推荐
恋猫de小郭14 分钟前
Flutter 3.50 & Dart 3.14 发布,快来看看有什么更新吧
android·前端·flutter
非优秀程序员8 小时前
第10章 千团出世|《互联网产品恩仇录》
前端
非优秀程序员8 小时前
第11章 小高在对面|《互联网产品恩仇录》
前端
非优秀程序员8 小时前
第14章 只剩美团|《互联网产品恩仇录》
前端
非优秀程序员8 小时前
第09章 老乡何必为难老乡|《互联网产品恩仇录》
前端
非优秀程序员8 小时前
第03章 三大门户,烽烟起于瀛海威|《互联网产品恩仇录》
前端
曦樂~12 小时前
【Web Development】02 CSS
前端·css
风骏时光牛马12 小时前
后端服务接口开发与数据逻辑处理
前端
东鹏特饮12 小时前
经典打砖块(Breakout)游戏
前端·css·css3
IT_陈寒13 小时前
Vite的HMR把我整不会了:一个生产环境的热更新坑
前端·人工智能·后端