4

動的に入力される列形式の順序付けられていないリストがあり、通常は ごとに 1 つまたは 2 つの単語しか<li>ありませんが、より長いリスト項目が表示されることがあります。列を保持するために、これらの長い項目の余分なテキストを省略記号で非表示にすることにしました。

li {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

しかし、ユーザーにこれらのアイテムへのアクセスを許可したいので、次のようなホバー スタイルを作成しました。

li:hover {
  overflow: visible;
}

これにより、テキストが列の間のスペースに表示されますが、隣接する に達すると停止します<li>。ホバリングされているものを優先して<li>、他のものよりも上に表示され、背景が不透明になるようにします。で遊んでz-indexもうまくいきませんでした。

ここにフィドルがあります：https://jsfiddle.net/9p7qeon2/

4

2 に答える 2

0

あなたの問題は、列の幅が固定されていることの結果であるように思われます。例:column-width: 200px子にホバーを使用しているため、純粋な CSS を使用して親の幅を変更することはできません。jQuery などを.addClass UL (親) 要素に使用してから、次のようなものを使用する必要があります: ul.active { column-width: 300px; }、しかしこれは他のすべての要素に望ましくない影響を及ぼします。

この方法で固定幅を使用すると、さまざまなブラウザーで多くの問題が発生することがわかります。たとえば、使用しているブラウザーによって問題が多少異なります。

  • Firefox は全文を表示しますが、背景色は表示しません。
  • Chrome と MS Edge では背景色が表示されますが、テキスト全体は表示されません...率直に言って、これは正しいことです。なぜなら、コンテナーは に制限されているから200pxです。ブラウザーが min-column-width をサポートしているとは思えず、私のテストでは問題が解決されません。

大きな画面では表示され、小さな画面では非表示になる固定パーセンテージを使用してフロートを使用できます。あなたのために作られたJSFiddleを参照してください。明らかに、このコードは要件に合わせて調整する必要がありますが、正しい方向に進んでいます。

要約...問題は、幅として200pxが設定されていることです...その幅をオーバーライドするにはmin-width、position: fixedまたはを使用する必要がありますposition: absolute。今思いつくのはそれだけです。

于 2016-04-14T16:58:36.507 に答える