html - 为什么没有明确大小的 div 中的链接和文本会中断？

Question

我试着有一个工具提示，它有标题和内容，大小应该是自动的。这意味着标题不应中断，内容应相应地适合。

这里的标题和内容都坏了为什么会坏？如何避免这种情况？这可以在不指定高度和宽度的情况下完成吗？

代码

HTML

<div class="wrap">
    link
    <div class='arrow'></div>
<div class="left">
    <div class="tit"><a href="#">This is a big text link</a></div>
    <div class="content"> Hello this are contents so if the content is big</div>
</div>
</div>

CSS

  .left{
      background: none repeat scroll 0 0 #FF0000;
      left:100%;
      position: absolute;
      top: -50%;
      padding:20px;
}
.wrap{
    left: 0;
    position: fixed;
    top: 50%;

}
.arrow
{
    border-bottom: 20px solid rgba(0, 0, 0, 0);
    border-right: 25px solid #008000;
    border-top: 20px solid rgba(0, 0, 0, 0);
    height: 0;
    left:0;
    position: absolute;
    width: 0;
}

JSFIDDLE

Answer 1

将 .wrap 宽度提到 100%

试试这段代码:

DEMO

.wrap{
    left: 0;
    position: fixed;
    top: 50%;
    width:100%;

}