Question

嗨，我希望我的标签的省略号样式在UL内部。我尝试为ul和省略号添加最大宽度和最小宽度，并为标签添加隐藏溢出。那个时候标签内容被放下了。我在标签内有输入和文字。我试过的代码是

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

任何人都可以帮助我。感谢......

Answer 1

将省略号规则移至li并将label设置为display:inline;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

另请注意<div ">会引起一些痛苦。 IDE会提示语法无效，但如果你是色盲，你就不会注意到这一点。

Answer 2

你在html中有错误，这项工作

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

省略号对标签不起作用

2 个答案: