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

问题描述

我有一个列表(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;`

解决方法

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

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

,

我会通过执行以下操作来改进这一点：

1. 添加包装 .list-items
2. 向分隔符添加一个类，即 ,（逗号）例如.delim
3. 移动分隔符结尾；以便在单词后使用逗号而不是换行到下一行。
4. 通过禁用换行来确保 <span> 中的 <li> 元素不被换行。
5. 从 <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/