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

Posted 2023-02-16

【中文标题】Vue JS如何垂直显示数组中的内部单词

【英文标题】：Vue JS how to display inner words in an array vertically

【发布时间】：2021-07-08 14:03:48

【问题描述】：

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

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

指定 display: flex 即获取遵循<li style = "display: flex"> <span> 12:32 </span> <span>AM</span> </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;"> ?

是的！有效！非常感谢

【参考方案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;