Liaoyi

外观

本页目录

white-space-nowrap 撑出了滚动条但撑不开盒子的宽度 ? ​

BUG 复现 ​

  • 这是很长很长很长很长很长很长很长很长的内容
  • 下面这根线把滚动条撑出来了
  • 但没有撑开li或者说ul本身的宽度
  • 导致线在撑开部分就没有
  • 实际原因是ul的宽度没被撑开
  • 这是内容
  • 这是内容
  • 这是内容
  • 这是内容
  • 这是内容
  • 这是内容
  • 这是内容
<template>
  <div class="scrollbar flex gap-4 w-full h-full text-white rounded-lg p-4 bg-gradient-to-r from-purple-500 to-pink-500">
    <div class="w-60 flex-shrink-0">
      <div class="w-full h-full overflow-auto ">
        <ul class="felx flex-col">
          <li>这是很长很长很长很长很长很长很长很长的内容</li>
          <li>下面这根线把滚动条撑出来了</li>
          <li>但没有撑开li或者说ul本身的宽度</li>
          <li>导致线在撑开部分就没有</li>
          <li>实际原因是ul的宽度没被撑开</li>
          <li>这是内容</li>
          <li>这是内容</li>
          <li>这是内容</li>
          <li>这是内容</li>
          <li>这是内容</li>
          <li>这是内容</li>
          <li>这是内容</li>
        </ul>
      </div>
    </div>
    <div class="flex-1 rounded-lg bg-white opacity-25" />
  </div>
</template>

<style lang="scss" scoped>
ul > li {
  min-height: 36px;
  white-space: nowrap;
  border-bottom: 1px solid #ffffff51
}
</style>

问题描述

上面的代码实现了一个左右布局的主体页面, 左侧内容的 li 设置了white-space:nowrap, 目的是使文字不换行, 如果文字很多超过了父容器的宽度, 那就会出现横向滚动条。

以上都还是符合预期的, 不符合预期的是white-space:nowrap撑出了横向滚动条, 但却没能撑开li和ul的宽度, 导致ul的宽度始终是没出现滚动条时的宽度, 由于li的宽度继承自ul, 所以li的宽度也被限制在了没有横向滚动条时的宽度. 由于对li加了border-bottom: 1px solid #333;, 此时就会发现这条黑色的下划线没有像预期中的充满整个宽度。

如何解决? ​

方案一 ​

TIP

使用 display: inline-block + min-width:100% + min-height:100%

  • 这是很长很长很长很长很长很长很长很长的内容
  • 下面这根线把滚动条撑出来了
  • 但没有撑开li或者说ul本身的宽度
  • 导致线在撑开部分就没有
  • 实际原因是ul的宽度没被撑开
  • 这是内容
  • 这是内容
  • 这是内容
  • 这是内容
  • 这是内容
  • 这是内容
  • 这是内容
<template>
  <div class="scrollbar flex gap-4 w-full h-full text-white rounded-lg p-4 bg-gradient-to-r from-purple-500 to-pink-500">
    <div class="w-60 flex-shrink-0 rounded-lg ">
      <div class="w-full h-full overflow-auto ">
        <!--
          inline-block-wrapper 这个div
          用于解决li设置了white-space: nowrap;之后，可以撑出横向滚动条，但撑不开li和ul的宽度问题
        -->
        <div class="inline-block-wrapper">
          <ul class="felx flex-col">
            <li>这是很长很长很长很长很长很长很长很长的内容</li>
            <li>下面这根线把滚动条撑出来了</li>
            <li>但没有撑开li或者说ul本身的宽度</li>
            <li>导致线在撑开部分就没有</li>
            <li>实际原因是ul的宽度没被撑开</li>
            <li>这是内容</li>
            <li>这是内容</li>
            <li>这是内容</li>
            <li>这是内容</li>
            <li>这是内容</li>
            <li>这是内容</li>
            <li>这是内容</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="flex-1 rounded-lg bg-white opacity-25" />
  </div>
</template>

<style lang="scss" scoped>
ul > li {
  min-height: 36px;
  white-space: nowrap;
  border-bottom: 1px solid #ffffff51
}

.inline-block-wrapper {
  display: inline-block;
  min-width: 100%;
  min-height: 100%;
}
</style>

方案二 ​

TIP

设置ul的min-width: max-content

  • 这是很长很长很长很长很长很长很长很长的内容
  • 下面这根线把滚动条撑出来了
  • 但没有撑开li或者说ul本身的宽度
  • 导致线在撑开部分就没有
  • 实际原因是ul的宽度没被撑开
  • 这是内容
  • 这是内容
  • 这是内容
  • 这是内容
  • 这是内容
  • 这是内容
  • 这是内容
<template>
  <div class="scrollbar flex w-full gap-4 h-full text-white rounded-lg p-4 bg-gradient-to-r from-purple-500 to-pink-500">
    <div class="w-60 flex-shrink-0 rounded-lg ">
      <div class="w-full h-full overflow-auto ">
        <!--
          设置ul的 min-width: max-content，
          用于解决li设置了white-space: nowrap;之后，可以撑出横向滚动条，但撑不开li和ul的宽度问题
        -->
        <ul class="felx flex-col" style="min-width: max-content;">
          <li>这是很长很长很长很长很长很长很长很长的内容</li>
          <li>下面这根线把滚动条撑出来了</li>
          <li>但没有撑开li或者说ul本身的宽度</li>
          <li>导致线在撑开部分就没有</li>
          <li>实际原因是ul的宽度没被撑开</li>
          <li>这是内容</li>
          <li>这是内容</li>
          <li>这是内容</li>
          <li>这是内容</li>
          <li>这是内容</li>
          <li>这是内容</li>
          <li>这是内容</li>
        </ul>
      </div>
    </div>
    <div class="flex-1 rounded-lg bg-white opacity-25" />
  </div>
</template>

<style lang="scss" scoped>
ul  li {
  min-height: 36px;
  white-space: nowrap;
  border-bottom: 1px solid #ffffff51
}
</style>

两种方案如何选择哪个?

从 can i use 网站看min-height, min-width的兼容性是强于max-content的, 从这点看个人更倾向使用方案一, 但方案二明显又更简单, 所以, 如果在实际项目中可以忽略兼容问题, 那优先采用方案二, 如果兼容问题无法避免, 那就采用方案一。

参考 🔗