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

不要给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>
  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值