Vue JS如何垂直显示数组中的内部单词答案

【问题标题】：Vue JS how to display inner words in an array verticallyVue JS如何垂直显示数组中的内部单词
【发布时间】：2021-07-08 14:03:48
【问题描述】：

我有一个保存时间的数组，问题是在浏览器中这些元素位于底部，我需要它们从侧面看这里是一个例子

我试图用 css 解决问题，但这是浪费时间，然后我决定在数组中应用 html 标签，例如  12:32 AM  然后为

指定 display: flex 即获取遵循<li style = "display: flex"> 12:32 AM </li> 的构造，但正如您已经猜到的那样，它不起作用

这是给定的code in codesandbox

<template>
  <div class="time-container">
    <div class="Container Flipped">
      <div class="Content">
        <ul>
          <li v-for="(item, index) in time" v-bind:key="index">
            {{ item }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      time: ["10:00 AM", "10:30 AM", "11:00 AM", "11:30 AM", "12:00 PM", "12:30 PM", "1:00 PM", "1:30 PM", "2:00 PM", "2:30 PM", "3:00 PM", "3:30 PM", "4:00 PM", "4:30 PM", "5:00 PM", "5:30 PM", "6:00 PM", "6:30 PM", "7:00 PM", "7:30 PM", "8:00 PM", "8:30 PM", "9:00 PM", "9:30 PM", "10:00 PM", "10:30 PM", "11:00 PM", "11:30 PM", "12:00 AM", "12:30 AM", "1:00 AM", "1:30 AM", "2:00 AM", "2:30 AM", "3:00 AM", "3:30 AM", "4:00 AM", "4:30 AM", "5:00 AM", "5:30 AM",
        "6:00 AM", "6:30 AM", "7:00 AM", "7:30 AM", "8:00 AM", "8:30 AM", "9:00 AM", "9:30 AM",],
    }
  }
}
</script>

<style scoped>

@font-face {
  src: url(~@/assets/fonts/FontsForClosePage/Montserrat-Bold.ttf);
  font-family: 'Second-Montserrat-Bold'
}

.Container {
  overflow-y: auto;
}

.Flipped, .Flipped .Content
{
  transform:rotateX(180deg);
  -ms-transform:rotateX(180deg); /* IE 9 */
  -webkit-transform:rotateX(180deg); /* Safari and Chrome */
}

.time-container {
  padding: 10px;
  background: #74C8C5;
  overflow-y: auto;
}

ul {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}

li {
  background: #FFFFFF;
  margin-right: 8px;
  border-radius: 7px;
  list-style-type: none;
  padding: 5px 10px 5px 10px;
  font-family: 'Second-Montserrat-Bold';
  font-size: 12px;
  line-height: 16px;
  text-align: center;
  color: #000000;
}
</style>

【问题讨论】：

你试过这样的 nowrap 吗？ <li style = "display: flex;white-space: nowrap;"> ?
是的！有效！非常感谢

标签： javascript arrays vue.js vuejs2

【解决方案1】：

只需将white-space 属性添加到li 选择器：

li {
  white-space: no-wrap;
}

请注意，当您的列表大小增加时，您将面临其他问题 - Why don't flex items shrink past content size? 另外，请阅读有关 flexbox 和文本截断 here 的更多信息。

【讨论】：

【解决方案2】：

我尝试了很多解决方案，这个可行

li {
  min-width:70px; 
}

【讨论】：