文本未包装在绝对定位的容器内

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

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

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

http://jsfiddle.net/DyxkA/