99网
您的当前位置:首页关于div>ul>li文本超出自适应宽度隐藏问题

关于div>ul>li文本超出自适应宽度隐藏问题

来源:99网

不要给div、ul、li设置宽度,可设置为100%

有多余的代码,没做删除,可自行调试删除,图片背景自己调换,文中还涉及到了

overflow:hidden下li标签图标消失问题,用list-style-position:inside;可解决图标问题,也可以改变图标样式颜色等,多余功能请读者自行探索,作者小白,大佬勿喷,谢谢!!!!

<div class="xa-main2">
	<img src="img/img_li-icon.png">
		<ul>
		   <li>滚动提示文字滚动提示文字滚动提示文字滚动提示文字滚动提示文字</li>
		   <li>滚动提示文字滚动提示文字滚动提示文字滚动提示文字滚动提示文字</li>
		</ul>
		<a><img src="img/arrow.png"></a>
</div>

<style>
.xa-main2 {
	width: 100%;
	display: flex;
	align-items: center;
	
}
.xa-main2>img {
	height: 40px;
}

.xa-main2>ul {
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	display: inline-block;
	margin-top: 10px;
	margin-bottom: 10px;
}
.xa-main2>a {
	margin-right: 3%;
}

.xa-main2>ul>li {
	width: auto;
	list-style-type: disc;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	list-style-position: inside;
	font-size: 16px;
	margin-right: 2%;
}
.xa-main2>ul>li::marker {
	color: #237ff1;
}
</style>

因篇幅问题不能全部显示,请点此查看更多更全内容