文字沒有包裹在絕對定位的容器內

我已經創建了絕對定位的工具提示，並且在其中具有max-width: 200px;的div。然而，div內的文本並未包裝到下一行。即使文本中有空格，它們也會走出容器，所以它不是一個分詞問題。見下圖：文字沒有包裹在絕對定位的容器內

編輯：工具提示從他們的觸發元素的title屬性拉動文本，這似乎是問題。如果內容是硬編碼的，則文本包裝很好。

enter image description here

這裏的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 */ 
}

這看起來很明顯，但我想不出是什麼問題。任何幫助，將不勝感激。

感謝

來源

2012-12-21 scferg5

似乎包裹在這裏很好http://jsfiddle.net/j08691/EqyWz/ – j08691

我們展示一個完整的代碼，看起來像你的問題不與您展示的部分代碼相關。 –

啊，發現它是什麼。工具提示從觸發元素的title屬性中獲取內容。如果我只是在內容中進行硬編碼，它就會很好。我不確定爲什麼會有所作爲，但... – scferg5

它可能有事情做與你注射文成.tooltip元素的方法。嘗試這樣的事情（使用jQuery）：

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

http://jsfiddle.net/DyxkA/

來源

2012-12-22 09:32:16

文字沒有包裹在絕對定位的容器內

回答

相關問題