0

絶対に配置され、内部にmax-width: 200px;. ただし、div 内のテキストは次の行に折り返されません。テキストにスペースがあってもコンテナの外に出ているので、単語区切りの問題ではありません。下の画像を参照してください。

編集:ツールチップはトリガー要素のtitle属性からテキストを取得しており、それが問題のようです。コンテンツがハードコーディングされている場合、テキストは問題なく折り返されます。

ここに画像の説明を入力

HTMLは次のとおりです。

<div class="tooltip">
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis malesuada, lectus eget gravida eleifend, odio libero hendrerit elit.</div>
</div>

そしてCSS：

.tooltip{
    padding: 10px;
    position: absolute;
    background: #303030;
    font-size: .9em;
    color: #ccc;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.4);
    -moz-box-shadow: 0 5px 10px rgba(0,0,0,.4);
    box-shadow: 0 5px 10px rgba(0,0,0,.4);
}

.tooltip  div{
    max-width: 200px;
    border: 1px solid red; /* See where element is */
}

これは非常に明白なようですが、問題が何であるかはわかりません。どんな助けでも大歓迎です。

ありがとう

4

1 に答える 1

0

おそらく、.tooltip要素にテキストを挿入する方法と関係があります。このようなことを試してください（jQueryを使用）：

$('.trigger').on('click', function() {
  $('.tooltip div').html($('.trigger').attr('title'));
});

http://jsfiddle.net/DyxkA/

于 2012-12-22T09:32:16.113 に答える