文字没有包裹在绝对定位的容器内

我已经创建了绝对定位的工具提示，并且在其中具有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

文字没有包裹在绝对定位的容器内

回答

相关问题