如何为列保持相同的宽度

Question

有没有办法包装长文本'aaaaaaaaaaaaaaaaa'并允许它为多行以保持列的相同宽度？

.menu的宽度必须尽可能长!!

.container {
    display: flex;
    flex-flow: column wrap;
    height: 300px;
}
.menu {
    background-color: #CCCCFF;
    border: 1px solid #CC6699;
}

<div class='container'>
    <div class="menu">aaaaa</div>
    <div class="menu">aaaaaaaaaaaaaaaaaa</div>
    <div class="menu">aaaaa</div>
    <div class="menu">aaaaa</div>
    <div class="menu">aaaaa</div>
    <div class="menu">aaaaa</div>
    <div class="menu">aaaaa</div>
    <div class="menu">aaaaa</div>
    <div class="menu">aaaaa</div>
    <div class="menu">aaaaa</div>
    <div class="menu">aaaaa</div>
    <div class="menu">aaaaa</div>
    <div class="menu">aaaaa</div>
    <div class="menu">aaaaa</div>
    <div class="menu">aaaaa</div>    
    <div class="menu">aaaaa</div>
    <div class="menu">aaaaa</div>
    <div class="menu">aaaaa</div>
    <div class="menu">aaaaa</div>
    <div class="menu">aaaaa</div>
    <div class="menu">aaaaa</div>
    <div class="menu">aaaaa</div>
    <div class="menu">aaaaa</div>
    <div class="menu">aaaaa</div>
    <div class="menu">aaaaa</div>    
    <div class="menu">aaaaa</div>
    <div class="menu">aaaaa</div>
    <div class="menu">aaaaa</div>
    <div class="menu">aaaaa</div>
    <div class="menu">aaaaa</div>
    <div class="menu">aaaaa</div>
    <div class="menu">aaaaa</div>
    <div class="menu">aaaaa</div>
    <div class="menu">aaaaa</div>
    <div class="menu">aaaaa</div>
    <div class="menu">aaaaa</div>
    <div class="menu">aaaaa</div>
    <div class="menu">aaaaa</div>
    <div class="menu">aaaaa</div>    
    <div class="menu">aaaaa</div>
    <div class="menu">aaaaa</div>
    <div class="menu">aaaaa</div>
    <div class="menu">aaaaa</div>
    <div class="menu">aaaaa</div>
</div>

Answer 1

您可以使用word-wrap: break-word;

编辑：我已经在前两个div中完成了

＆＃13;

＆＃13;

.container {
    display: flex;
    flex-flow: column wrap;
    height: 300px;
}
.menu {
    background-color: #CCCCFF;
    border: 1px solid #CC6699;
}
.inner {
    width: 40px;
    word-wrap: break-word;/* using this and the width */
}

＆＃13;

<div class='container'>
    <div class="menu"><div class="inner">aaaaa</div></div>
    <div class="menu"><div class="inner">aaaaaaaaaaaaaaaaaa</div></div>
    <div class="menu">aaaaa</div>
    <div class="menu">aaaaa</div>
    <div class="menu">aaaaa</div>
    <div class="menu">aaaaa</div>
    <div class="menu">aaaaa</div>
    <div class="menu">aaaaa</div>
    <div class="menu">aaaaa</div>
    <div class="menu">aaaaa</div>
    <div class="menu">aaaaa</div>
    <div class="menu">aaaaa</div>
    <div class="menu">aaaaa</div>
    <div class="menu">aaaaa</div>
    <div class="menu">aaaaa</div>    
    <div class="menu">aaaaa</div>
    <div class="menu">aaaaa</div>
    <div class="menu">aaaaa</div>
    <div class="menu">aaaaa</div>
    <div class="menu">aaaaa</div>
    <div class="menu">aaaaa</div>
    <div class="menu">aaaaa</div>
    <div class="menu">aaaaa</div>
    <div class="menu">aaaaa</div>
    <div class="menu">aaaaa</div>    
    <div class="menu">aaaaa</div>
    <div class="menu">aaaaa</div>
    <div class="menu">aaaaa</div>
    <div class="menu">aaaaa</div>
    <div class="menu">aaaaa</div>
    <div class="menu">aaaaa</div>
    <div class="menu">aaaaa</div>
    <div class="menu">aaaaa</div>
    <div class="menu">aaaaa</div>
    <div class="menu">aaaaa</div>
    <div class="menu">aaaaa</div>
    <div class="menu">aaaaa</div>
    <div class="menu">aaaaa</div>
    <div class="menu">aaaaa</div>    
    <div class="menu">aaaaa</div>
    <div class="menu">aaaaa</div>
    <div class="menu">aaaaa</div>
    <div class="menu">aaaaa</div>
    <div class="menu">aaaaa</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

在width的CSS中添加.menu，并添加word-wrap:break-word;如下所示：

CSS

.container {
    display: flex;
    flex-flow: column wrap;
    height: 300px;
}
.menu {
    background-color: #CCCCFF;
    border: 1px solid #CC6699;
    width:100px; /*change this as necessary*/
    word-wrap:break-word;
}

Working Fiddle