省略号无法正常用于标签
[英]Ellipsis is not working properly for label
问题描述
hi i want that ellipsis style for my label which is inside the UL .
嗨，我想要我的标签的省略号样式，它在 UL 内。 i try like adding max width and min width for ul and ellipsis and overflow hidden for label.我尝试为 ul 和省略号添加最大宽度和最小宽度，并为标签隐藏溢出。 that time the label content is put down .那个时候标签内容就放下了。 i have a input and text inside the label.我在标签中有一个输入和文本。 the code i tried is given给出了我试过的代码
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>
can any one please help me.谁能帮帮我吗。 thanks......谢谢......
2 个解决方案
解决方案1
0 已采纳 2017-12-27 15:40:36
Move the ellipsis rules to the li and set the label s to display:inline;将省略号规则移至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>
Also note that <div "> will cause some pain. The IDE will hint at invalid syntax, you won't be noticing this if you're colorblind though.还要注意<div ">会引起一些痛苦。IDE 会提示无效的语法，但如果您是色盲，则不会注意到这一点。
解决方案2
-1 2017-12-27 15:29:58
You have error in html, this work你在 html 中有错误，这项工作
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="">onefdgdsfandsfñjndjñkadsnfkjsadoyhfgbohdsaingdsag</label> </li> <li> <input type="checkbox"> <label class="">oneeeeeeeeeeeeeeeeeefdsafndsaifndaipfjndsapfijondsaf</label> </li> <li> <input type="checkbox"> <label class="">twoooooooooooooooooooooooooooooooooooadsfndsapifdsaofndsam0finkdsaf</label> </li> </div> <button >cancel</button> <button >Apply</button> </ul> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.