文本不換的均勻分佈，甚至寬度Flexbox的

Question

這裏有一個例子：https://jsfiddle.net/gxhb2xnu/1

.container { 
 
    display: flex; 
 
    flex-direction: row; 
 
    width: 100%; 
 
    height: 100vh; 
 
} 
 

 
.column { 
 
    flex: 1; 
 
    background: red; 
 
    margin: 0 4px; 
 
    height: 100%; 
 
}

<div class="container"> 
 
    <div class="column">foõ foõ foõ foõ foõ foõ</div> 
 
    <div class="column">foõ</div> 
 
    <div class="column">foõ</div> 
 
    <div class="column">foõ</div> 
 
    <div class="column">foõfoõfoõfoõfoõfoõfoõfoõfoõfoõfoõfoõfoõfoõfoõfoõfoõ</div> 
 
</div>

正如你可以看到最後一欄調整其寬度以適應文本。我希望每一列都有相同的寬度，並將中間的單詞分解到下一行。

我試過flex-basis: 0和word-wrap: break-word;，但它似乎沒有影響它。

Answer 1

有報道說，我已經糾正了一些錯誤。

1. 修正了彎曲特性在column divs。
2. 使用word-break:break- word

下面是工作的代碼。

.container { 
 
    display: flex; 
 
    flex-direction: row; 
 
    width: 100%; 
 
    height: 100vh; 
 
} 
 

 
.column { 
 
    flex-grow: 1; 
 
    flex-basis: 0; 
 
    background: red; 
 
    margin: 0 4px; 
 
    height: 100%; 
 
    word-break: break-word; 
 
}

<div class="container"> 
 
    <div class="column">foõ foõ foõ foõ foõ foõ</div> 
 
    <div class="column">foõ</div> 
 
    <div class="column">foõ</div> 
 
    <div class="column">foõ</div> 
 
    <div class="column">foõfoõfoõfoõfoõfoõfoõfoõfoõfoõfoõfoõfoõfoõfoõfoõfoõ</div> 
 
</div>

Answer 2

添加word-break: break-word;列級