1

ツリーのようなリストを持つサイドバーを実装しようとしています。ツリー内の各要素が 1 行だけを埋めるようにしたい - オーバーフローや改行/ワードラップはありません。良い解決策になるかもしれませんが、別のoverflow: hidden;要件があります.各行にはツールチップ/ポップオーバー（ブートストラップのポップオーバー）として絶対divがあり、非表示にしたり「クリップ」したりしたくありません（トップレイヤーにあると思われます） ）。問題は、オーバーフローした場合に非表示にする必要がある要素の子としてポップオーバーが生成されることです。添付の画像に一致する動作を実現するにはどうすればよいですか?

例：

ここに画像の説明を入力

4

3 に答える 3

1

テキストの各行を別の要素 ( a<div>や など)で囲み、親ではなくそれらに<span>適用します。overflow: hidden

あなたの現在：

<div style="container" style="overflow: hidden">
    My text
    <div class="popup">My popup</div>
    Some more text
</div>

あなたがすべきこと：

<div style="container">
    <div class="text" style="overflow: hidden">My text</div>
    <div class="popup">My popup</div>
    <div class="text" style="overflow: hidden">Some more text</div>
</div>

(インライン スタイルを使用するのではなく、スタイルシートでこれを行うことを忘れないでください)

于 2013-06-20T07:26:40.823 に答える
0

z-indexポップオーバーで使ってみてください! :)

使用法と定義はこちらを参照してください。

この例も試してみてください: http://www.w3schools.com/CSSref/tryit.asp?filename=trycss_zindex

于 2013-06-20T07:25:29.603 に答える
0

子には負のマージンが必要であり、絶対的な表示は必要ありません。これは、親テキストのオーバーフローに影響を与えないためです。

例: http://jsbin.com/akivid/3/edit

<div class='out'>
TEXT 
    <div class='in'>          
      <span class='triangle-left'></span>
      TEXT
    </div>
</div>

CSS:

.out{
  width:100px;
  background-color:gold;
  word-wrap: break-word;
  padding:10px;
}
.in{
 background-color:lime;
  margin-right:-20px;
  margin-left:20px;
  width:40px;
  float:right;
  word-wrap: break-word;
  position:relative;
 padding:5px;
}
.triangle-left {
  position:absolute;
  left:-15px;
  top:10px;
  width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-right: 15px solid lime;
    border-bottom: 10px solid transparent;
}
于 2013-06-20T07:58:54.997 に答える