追格小站点评主题“H5资讯列表”标题调整为两行或多行的方法

fox/ 2023年05月25日/ WordPress/ 浏览 1168

追格小站点评主题资讯列表的标题在H5模式下默认为一行,超出隐藏,我们可以通过调整css,将WordPress主题小站点评资讯列表标题调整为两行显示。


我们可以通过css参数实现自动换行显示,超出并隐藏。


具体实现方法如下:


1、在main.css中搜索:.zhuige-list-text h6


2、参考以下做修改

.zhuige-list-text h6 {
	font-size: 13px;
	font-weight: 500;
	/* 	height: 30px; */
	line-height: 26px;
	flex-wrap: nowrap;
	align-items: center;
	word-break: keep-all;
	text-overflow: ellipsis;
	overflow: hidden;
	display: flex;
	align-items: center;
}


3、搜索.zhuige-news-list .zhuige-list-text h6 a


4、参考以下做修改


.zhuige-news-list .zhuige-list-text h6 a {
	display: flex;
	align-items: center;
	-webkit-line-clamp: 2;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: normal;
	display: -webkit-box!important;
	-webkit-box-orient: vertical;
}


这样我们便可以得到以下效果,左侧为修改后的两行,右侧为修改前的单行。



我们还可以通过-webkit-line-clamp参数来控制显示行数,这里设置的是:2,超过两行即隐藏。

发表评论

暂无评论,抢个沙发...

客服 工单