マイグループ化されたドロップダウンリストボックスをオーバーフローし、次のようになり、グループ化されたドロップダウンリストボックスのキャプションは
JSfiddleコードがhereです。
Issue No.1）キャプションの長さがGrouped dropdown boxの場合、逆三角形を次の行にプッシュします。私はキャプション長さを短くすると、アイコンが溢れコンテンツを隠さないulキャプションにoverflow:hiddenの設定）
号2号、などのラインに該当します。また、リスト項目のtext-overflow:ellipsisには3重点が表示されません。
私の意見では、このdiv、ul、およびliの代わりにOPTIONおよびOPTGROUPタグを使用するべきです。彼らははるかに便利で簡単です。ここにあります： -
<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>
Textoverflowはブロックまたはインラインブロック要素でのみ動作します。それを動作させるためにあなたのspanタグにdisplay: inline-block;を追加します。
.btn-text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 120px;
display: inline-block;
}
はexampleを参照してください。
UPDATE
.drp-down-cntのdivが、リスト項目自体の上のオーバーフローを適用しないでください。同様に
.list-item-name{
width: 150px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
}
、これは.group-header
に適用することで可能更新されたexample
fiddle。ここを確認してください。 問題2は解決されましたが、問題1は一時的に解決されました。
.list-item-name {
white-space: nowrap;
width: 9em;
overflow: hidden;
text-overflow: ellipsis;
}
この
は、あなたがあなたの出力は – smraj
の.list-項目名{ 空白になりたいんよりclearer.Whatあなたのポイントを作成してくださいすることができます試してみてください。NOWRAP。 幅：9em; オーバーフロー：非表示。 テキストオーバーフロー：省略記号。 } これを試してください。 – smraj