[前端学习]CSS 设置文字只显示一行,多余显示省略号

释放双眼,带上耳机,听听看~!

设计网站列表页面的时候,经常会遇到当两篇文章标题行数不相同时,显得页面非常不协调的感觉吧。

css就可以实现网站列表页中的标题统一显示几行,多余文字神略号代替。

让标题文字只显示一行,多余省略号代替

.title{
  display: inline-block;//设置inline-block属相
  white-space: nowrap; //强制不换行
  width: 100%; //固定高度
  overflow: hidden;//隐藏超出部分
  text-overflow:ellipsis;//显示“……”
}
  .title{
	width:200px;
	word-break:break-all;
	display:-webkit-box;//溢出用省略号显示
	-webkit-line-clamp:2;//显示2行文字
	-webkit-box-orient:vertical;//超出的文本隐藏
	overflow:hidden;
}

人已赞赏
系统运维

[CentOS教程]centos7.4升级7.6的方法

2020-1-10 16:49:50

系统运维

Centos利用代码破解宝塔面板使用专业版

2020-2-25 20:59:19

无言资源博客
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索