Как разбить слова с IE 11 на WP 8.1?

Question

Я изо всех сил пытаюсь получить word-wrap: break-word; для работы с Nokia Lumia 930 (и, возможно, с другими телефонами для Windows). Есть идеи? Текст просто переместится на следующую вкладку.

Кажется, что работает нормально в iOS и Android.

body { 
 
    background: lightblue; 
 
} 
 

 
.container { 
 
    width: 320px; 
 
    margin: 20px auto; 
 
    border: 1px solid #ebebeb; 
 
    background: white; 
 
} 
 

 
.tabs { 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
} 
 

 
.tab { 
 
    width: 25%; 
 
    -webkit-flex: 1 1 auto; 
 
    -ms-flex: 1 1 auto; 
 
    flex: 1 1 auto; 
 
    -webkit-flex-direction: column; 
 
    -ms-flex-direction: column; 
 
    flex-direction: column; 
 
    -webkit-flex-wrap: wrap; 
 
    -ms-flex-wrap: wrap; 
 
    flex-wrap: wrap; 
 
    -webkit-align-items: center; 
 
    -ms-flex-align: center; 
 
    align-items: center; 
 
    -webkit-justify-content: center; 
 
    -ms-flex-pack: center; 
 
    justify-content: center; 
 
    border-right: 1px solid #ebebeb; 
 
} 
 

 
.tab:last-child { 
 
    border-right: none; 
 
} 
 

 
.label { 
 
    display: block; 
 
    margin: auto 0; 
 
    text-align: center; 
 
    word-wrap: break-word; 
 
}

<div class="container"> 
 
    <div class="tabs"> 
 
    <div class="tab"> 
 
     <span class="label">xxxxxx xxx xxxxxxxxxx</span> 
 
    </div> 
 
    <div class="tab"> 
 
     <span class="label">xxxxxx xx xxxxx</span> 
 
    </div> 
 
    <div class="tab"> 
 
     <span class="label">xxxx xxxxxx</span> 
 
    </div> 
 
    <div class="tab"> 
 
     <span class="label">xxxxxx xx</span> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

align-self: stretch Добавление к .label решает эту проблему.

.label{ 
    align-self: stretch 
}