Question

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

在这里，标题和内容正在打破为什么它会破裂？怎么避免这个？这可以在不指定高度和宽度的情况下完成吗？

CODE

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%;

}

Answer 2

如果您尝试阻止换行符，那么white-space属性可能正是您要找的。

只需将white-space: nowrap;添加到要阻止中断的类中。

为什么没有明确大小的div内的链接和文本会破坏？

2 个答案: