Question

我的分组下拉列表框如下所示，

JSfiddle代码是here。

问题1）当标题长度为Grouped dropdown box时，它将倒三角形推到下一行。当我减少字幕长度时，图标会变为行，

问题2）在overflow:hidden标题上设置ul并不会隐藏溢出的内容。同样，列表项上的text-overflow:ellipsis没有显示任何三点。

Answer 1

Textoverflow仅适用于块或内联块元素。将display: inline-block;添加到您的span标记以使其正常工作：

.btn-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 120px;
  display: inline-block;
}

请参阅example。

<强>更新

不要在.drp-down-cnt div上应用溢出，而是在列表项本身上应用：

.list-item-name{
   width: 150px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   display: inline-block;
 }

以类似的方式，这可以应用于.group-header

更新了example

Answer 2

我已更新您的fiddle。点击这里问题2已解决，但问题1已暂时解决。

Answer 3

在我看来，你应该使用OPTION和OPTGROUP标签代替这个div，ul和li。它们更方便，更方便。这是： -

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>

                <select>
                <option value="opt123">Grouped drop down box caption</option>
                <optgroup label="I am group one">
                    <option value="opt11">I am child one's child longgggggggggggggg</option>
                    <option value="opt12">I am one's child two</option>
                    <option value="opt13">I am one's child three</option>
                </optgroup>
                <optgroup label="I am group two">
                    <option value="opt21">I am 2's child one</option>
                    <option value="opt22">I am 2's child two</option>
                    <option value="opt23">I am 2's child three</option>
                </optgroup>
                </select>

    </body>
</html>

Answer 4

.list-item-name { 
    white-space: nowrap; 
    width: 9em; 
    overflow: hidden;
    text-overflow: ellipsis;
}

请试试这个

分组下拉列表框标题溢出

4 个答案: