如果 <ul> 的长度超过屏幕宽度，则 <li> 项转到下一行 [关闭]答案

【问题标题】：<li> items to go to next line if length of <ul> exceeds screen width [closed]如果 <ul> 的长度超过屏幕宽度，则 <li> 项转到下一行 [关闭]
【发布时间】：2021-04-09 16:09:32
【问题描述】：

我有一个列表(click for fiddle)：

  <ul class="list-items" :style="styleObject">
    <li v-for="(item, index) in listItems" :key="index">
      <span v-if="index != 0">, </span><span>{{ item.name }}</span>
    </li>
  </ul>

<style lang="scss" scoped>
.list-items {
  display: inline-flex;
}
ul {
  list-style-type: none;
}
</style>

它看起来像这样：

这在桌面上很棒，但是当屏幕变小时，单词会被打乱而不是进入下一行：

我想要的是，每当最后一个单词超过屏幕宽度时，它就会转到下一行，这样我的列表就不会像上图那样被打乱，我该怎么做？

注意不确定它是否重要，但 class="list-items" 位于具有以下样式的 div 中：

display: flex;
align-items: center;`

【问题讨论】：

您在寻找display: inline-block吗？

标签： javascript html css vue.js html-lists

【解决方案1】：

您可以添加“flex-wrap:wrap;”像这样的规则：

.list-items {
  display: inline-flex;
  flex-wrap: wrap;
}

【讨论】：

警告：由于您没有考虑逗号，因此它们在下一行变成了“悬挂”逗号。

【解决方案2】：

我会通过以下方式改善这一点：

添加包装.list-items
向分隔符添加一个类，即,（逗号），例如.delim
移动分隔符结束；以便单词后面的逗号而不是换行到下一行。
通过禁用换行确保<li> 中的<span> 元素不会换行。
从<ul> 中删除左侧填充。

new Vue({
  el: "#app",
  data: {
    listItems: [
      { name: "Mystery"},
      { name: "Western" },
      { name: "Drama"},
      { name: "Action" },
      { name: "Romance" },
      { name: "Kids" },
      { name: "Film Noir" },
      { name: "Biographical" },
    ]
  }
})

#app {
  border: thin dashed red;
  max-width: 14em;
}

ul.list-items {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  list-style-type: none;
  padding-left: 0;
}

ul.list-items li {
  white-space: nowrap;
}

ul.list-items li span.delim {
  margin-right: 0.25em;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
 <ul class="list-items" :style="styleObject">
    <li v-for="(item, index) in listItems" :key="index">
      <span>{{ item.name }}</span><span class="delim" v-if="index < listItems.length - 1">,</span>
    </li>
  </ul>
</div>

这里还有一个外部 Fiddle：https://jsfiddle.net/MrPolywhirl/73rgd82a/

【讨论】：