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

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

我试图解决css的问题，但这是浪费时间，然后我决定在数组中应用html标记，例如

12:32 AM

，然后为

指定display:flex，也就是说，获得以下结构

12:32 AM

，但正如您已经猜到的那样，它不起作用

这是给你的答案

{{item}}


导出默认值{
数据（）{
返回{
时间：[“上午10:00”，“上午10:30”，“上午11:00”，“上午11:30”，“下午12:00”，“下午12:30”，“下午1:00”，“下午1:30”，“下午2:00”，“下午2:30”，“下午3:00”，“下午3:30”，“下午4:00”，“下午4:30”，“下午5:30”，“下午6:00”，“下午6:30”，“下午7:30”，“下午8:30”，“下午9:30”，“晚上10:00”，“下午10:30”，“下午11:30”，“上午12:00”，“下午12:30”，“凌晨1:00”、“凌晨1:30”、“凌晨2:00”、“凌晨2:30”、“凌晨3:00”、“凌晨3:30”、“凌晨4:00”、“凌晨4:30”、“凌晨5:00”、“凌晨5:30”，
“上午6:00”、“上午6:30”、“上午7:00”、“上午7:30”、“上午8:00”、“上午8:30”、“上午9:00”、“上午9:30”、]，
}
}
}
@字体{
src:url（~@/assets/fonts/FontsForClosePage/Montserrat Bold.ttf）；
字体系列：“第二蒙特塞拉特黑体”
}
.集装箱{
溢出y：自动；
}
.Flipped，.Flipped.Content
{
变换：rotateX（180度）；
-ms变换：rotateX（180度）；/*IE 9*/
-webkit变换：rotateX（180度）；/*Safari和Chrome*/
}
.时间容器{
填充：10px；
背景#74C8C5；
溢出y：自动；
}
保险商实验室{
显示器：flex；
对齐项目：居中；
保证金：0；
填充：0；
}
李{
背景：#FFFFFF；
右边距：8px；
边界半径：7px；
列表样式类型：无；
填充：5px10px 5px10px；
字体系列：“第二蒙特塞拉特黑体”；
字体大小：12px；
线高：16px；
文本对齐：居中；
颜色：#000000；
}

只需将

空白

属性添加到

li

选择器：

li {
  white-space: no-wrap;
}

---

请注意，当列表大小增加时，您将面临其他问题-此外，请阅读更多有关flexbox和文本截断的信息。

只需将

空白

属性添加到

li

选择器：

li {
  white-space: no-wrap;
}

---

请注意，当列表大小增加时，您将面临其他问题-此外，请阅读更多有关flexbox和文本截断的信息。

我尝试了许多解决方案，但这一个很有效

li {
  min-width:70px; 
}

---

我尝试了很多解决方案，这一个奏效了

li {
  min-width:70px; 
}

---

您是否尝试过这样的nowrap；

？是的！它成功了！非常感谢您。您是否愿意尝试这样的nowrap；

？是的！成功了！非常感谢