嗨，我想要 UL 内的标签的省略号样式。我尝试为 ul 和省略号添加最大宽度和最小宽度，并为标签 overflow hidden 。那个时候标签内容是放下来的。我在标签内有一个输入和文本。我试过的代码已经给出了
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>谁能帮帮我。谢谢……
最佳答案
将省略号规则移至 li并设置 label s 至 display:inline;
ul {
min-width: 200px;
margin: 0;
border-radius: 0;
max-height: 270px;
max-width: 200px;
background: red;
}
label {
display: inline;
}
li {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}<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="">twoooooooooooo0000oooooooo</label>
</li>
</div>
<button>cancel</button>
<button>Apply</button>
</ul>
</html>另请注意 <div ">会引起一些疼痛。
IDE 会提示语法无效，但如果您是色盲，您将不会注意到这一点。
关于html - 省略号不适用于标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47994558/