Hey there, I'm looking to style my label with an ellipsis effect that is inside a UL element. I have tried adding max width and min width for the UL, along with ellipsis and overflow hidden for the label. However, this causes the label content to be pushed down. Inside the label, I have both an input and text. Here is the code snippet I've been working on:
ul{
min-width: 200px;
margin: 0;
border-radius: 0;
max-height: 270px;
max-width: 200px;
background:red;
}
label{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display:block;
}<html>
<ul class="dropdown-menu main ">
<li>
<a href="#">Select All</a>
</li>
<li>
<a href="#">Select None</a>
</li>
<li>
<label>my numbers</label>
</li>
<div ">
<li>
<input type="checkbox">
<label class="">one</label>
</li>
<li>
<input type="checkbox">
<label class="">oneeeeeeeeeeeeeeeeee</label>
</li>
<li>
<input type="checkbox">
<label class="">twoooooooooooooooooooo</label>
</li>
</div>
<button >cancel</button>
<button >Apply</button>
</ul>
</html>If anyone can provide assistance, it would be greatly appreciated. Thank you!