css-position - 文本没有包裹在绝对定位的容器内

Question

我创建了绝对定位的工具提示，其中包含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 */
}

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

谢谢

Answer 1

它可能与您将文本注入.tooltip元素的方式有关。尝试这样的事情（使用 jQuery）：

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

http://jsfiddle.net/DyxkA/