前端使用经验——如何在<p>元素中展示固定行数的文字,超出部分显示省略号
分类:计算机 | 前端 | CSS | 综合 328
更新:2021-11-04 01:21:51编辑
1 说明
最近项目上有个需求,就是有一个网站列表,每个网站下面要加上一段简介,简介文字有行数限制,超出行数以后后面的文字用省略号显示。
2 CSS代码
.websiteul p {
margin: 5px 3px;
font-size: 14px;
color: #555;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 4; /*设置p元素最大可以显示4行文字*/
-webkit-box-orient: vertical;
}
3 效果图
猿导航
阅读排行榜
- 1three.js加载3D瓦片和3dtiles数据生成交互式地图的开源项目7946
- 2vue和el-table使用经验-如何刷新表格数据7539
- 3uni-app使用经验—vue页面和html页面如何互相调用接口并传参3671
- 4Spring学习经验—@ResponseBody注解的使用说明2197
- 5nuxt.js项目中如何添加和使用全局变量2183
- 6如何用批处理命令(bat脚本)启动和停止windows服务2139
- 7Intellij IDEA下的版本控制VCS的启用与关闭2036
- 8Druid异常解决经验—java.sql.SQLException url not set2014
- 9nuxtjs asyncData使用经验—如何发起多个axios请求并携带参数2002
- 10解决SpringBoot使用maven下载不了jar包的问题1965
- 11mybatis使用经验——mybatis-spring-boot-starter和mybatis的版本对应关系表(持续更新~)1860
- 12在Nuxt.js项目的head中引用外部js文件1780
- 13linux如何成功地离线安装docker1774
- 14Nuxt.js项目实现路由鉴权和用户登录1750
- 15软件项目管理——详细设计说明书模板11718