溢出滚动条和nowrap不需要的滚动条

Question

我有一个下拉菜单，我想有文本内容控制的宽度。有时这个菜单会有一个带有滚动条的max-height。

如果您运行下面的代码片段，您将看到由于滚动条的存在，最长的一段文本的最后一个单词将换行。使用white-space: nowrap;将导致文本在y轴滚动条下方，并使x轴滚动条出现。

让它工作的最好方法是什么?我可以用JS做很多事情(检测文本的宽度和应用宽度到容器等)，但寻找CSS唯一的解决方案。

.drop-menu {
  postion: relative;
}
ul, il {
  margin: 0;
  padding: 0;
  list-style: none;
}
.drop-items {
  overflow: auto;
  max-height: 100px;
  position: absolute;
  border: 1px solid #ccc;
}
.drop-items li {
  border-bottom: 1px solid #ccc;
  /* white-space: nowrap; */
}

<div class="drop-menu">
  <span>Menu</span>
  <div class="drop-items">
    <ul>
      <li>Item</li>
      <li>Item item item item item item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
    </ul>
  </div>
</div>

Answer 1

尝试添加.drop-items { left: 0; right: 0; }。注意，容器的宽度将不再由内容决定。

顺便说一下，你有一个错字postion，应该是position。

jsFiddle

.drop-menu {
  position: relative;
}
ul,
il {
  margin: 0;
  padding: 0;
  list-style: none;
}
.drop-items {
  overflow: auto;
  max-height: 100px;
  position: absolute;
  left: 0;
  right: 0;
  border: 1px solid #ccc;
}
.drop-items li {
  border-bottom: 1px solid #ccc;
  white-space: nowrap;
}

<div class="drop-menu">
  <span>Menu</span>
  <div class="drop-items">
    <ul>
      <li>Item</li>
      <li>Item item item item item last</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
    </ul>
  </div>
</div>

或者，只是使用一些右填充，例如.drop-items li { padding-right: 30px; }来为水平滚动条腾出空间。根据这篇文章——"在现代浏览器上，滚动条通常是17像素宽，但我仍然建议你在制作线框或创建模型时继续使用20像素作为你的规格"。

如果需要，您甚至可以执行overflow-y: auto; overflow-x: hidden;。

jsFiddle

.drop-menu {
  position: relative;
}
ul,
il {
  margin: 0;
  padding: 0;
  list-style: none;
}
.drop-items {
  overflow: auto;
  max-height: 100px;
  position: absolute;
  border: 1px solid #ccc;
}
.drop-items li {
  border-bottom: 1px solid #ccc;
  white-space: nowrap;
  padding-right: 30px;
}

<div class="drop-menu">
  <span>Menu</span>
  <div class="drop-items">
    <ul>
      <li>Item</li>
      <li>Item item item item item last</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
    </ul>
  </div>
</div>