如果 <ul> 的长度超过屏幕宽度，<li> 项转到下一行

Question

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

Answer 1

您可以添加“flex-wrap:wrap;”规则如下：

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

Answer 2

我会通过执行以下操作来改进它：

添加包装 .list-items
在分隔符中添加 class，即 ,（逗号），例如.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/

如果 <ul> 的长度超过屏幕宽度，<li> 项转到下一行

<li> items to go to next line if length of <ul> exceeds screen width

html

javascript

css

html-lists

vue.js