为什么我的换行符在 vue 中不起作用？ flex 可能有什么问题？

Question

我想要一个换行符并尝试使用和
，并尝试

然而，换行符不起作用：

我将 post 下面的相关 css 代码（我使用了 flex，这可能是我之前在问题中描述的问题，但我的意思是，我必须多写一些文字根据系统）：

.modal-mask {
    position: fixed;
    z-index: 9998;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
    display: table;
    transition: opacity .3s ease;
}

.modal-wrapper {
    display: table-cell;
    vertical-align: middle;
}

.modal-container {
    width: 400px;
    margin: 0 auto;
    padding: 20px 30px;
    background-color: #fff;
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
    transition: all .3s ease;
    font-family: Helvetica, Arial, sans-serif;
}

.modal-header h3 {
    margin-top: 0;
    color: #42b983;
}

.flex
    display flex
    justify-content center

.close
    background:rgba(0,0,0,0);
    border none
    border-radius: 3px;
    padding: 10px 20px;

    &:hover
        background:rgba(0,0,0,0.20)

.modal-body {
    margin: 20px 0;
}

.modal-enter {
    opacity: 0;
}

.modal-leave-active {
    opacity: 0;
}

.modal-enter .modal-container,
.modal-leave-active .modal-container {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

我基本上去了：

    <model v-model="info">
      <div><b>ls / ll: </b>list files</div>
      <div><b>cat: </b>print file content</div>
    </model>

感谢@evolutionbox的提醒

    <model v-model="info">
      <span><b>ls / ll: </b>list files</span>
      <br />
      <span><b>cat: </b>print file content</span>
    </model>

Answer 1

如果您的型号有属性显示器：flex。尝试添加 flex-direction: column;它会将元素堆叠在彼此下方。

display: flex
flex-direction: column;

Answer 2

您的代码片段使用了 <b> 标签而不是 <br />。

为什么我的换行符在 vue 中不起作用？ flex 可能有什么问题？

why is my line break not working in vue? probably something wrong with flex?

javascript

css

frontend

stylus

vue.js