防止文字环绕在绝对定位的元素中

Question

我想创建一个意见箱，但“下拉列表”中的项目会自动换行。 我希望他们在水平方向上占据所需的空间。

我如何告诉菜单在水平方向上占用其子菜单所需的空间？

 .container { position: relative; width: 200px; } .container > input { box-sizing: border-box; width: 100%; } .menu { position: absolute; border: 1px solid blue; padding: 2px; } 

 <div class="container"> <input type="text"> <div class="menu"> <span class="item">a very very very very long item</span> </div> </div> 

和jsfiddle： https ://jsfiddle.net/89d2z95t/6/

Answer 1

绝对定位的元素具有一个边界框，该边界框由最近定位的祖先（ MDN ）设置。 流出要素受这些边界的限制。

在您的代码中，由于最接近的祖先（ .container ）具有200px的固定宽度，因此绝对定位的后代（ .menu ）不能超过该限制。 因此，文本换行。

您可以强制元素使white-space: nowrap框溢出white-space: nowrap 。

 .container { position: relative; width: 200px; } .container>input { box-sizing: border-box; width: 100%; } .menu { position: absolute; border: 1px solid blue; padding: 2px; white-space: nowrap; /* NEW */ } 

 <div class="container"> <input type="text"> <div class="menu"> <span class="item">a very very very very long item</span> </div> </div> 

Answer 2

在您的.container您可以指定min-width: 200px; 而不是绝对宽度，这将使其与孩子一起水平伸展。

然后，为了防止更大的跨度，您可以强制使其永不环绕：

.item {
  white-space: nowrap;
  overflow: hidden;
}

Answer 3

更新到您的jsfiddle，设置输入width:200px

 .container { position: relative; } .container > input { box-sizing: border-box; width:200px; } .menu { position: absolute; border: 1px solid blue; padding:2px; } 

 <div class="container"> <input type="text"> <div class="menu"> <span class="item">a very very very very long item</span> </div> </div>