css-position - 文本未环绕在绝对定位的容器内

Question

我创建了绝对定位的工具提示，其中包含 max-width: 200px; 的 div。但是，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 */
}

这看起来很明显，但我想不出问题是什么。任何帮助将不胜感激。

谢谢

Answer 1

这可能与您将文本注入(inject) .tooltip 元素的方式有关。尝试这样的事情(使用 jQuery):

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

http://jsfiddle.net/DyxkA/