タブ付きラベルを反応的にするにはどうすればよいですか？

Question

私は自分のサイトにタブ付きの機能を持っていて、ラベル以外は反応します。ラベルを適切に折り返すために私のスタイルシートに何を追加するのか分かりません。今、私がdivのサイズを小さくすると、ラベルが溢れてしまいます。

ここに私が持っているものの真実があります。これまで試みてきたことはすべてうまくいきませんでした。どんな洞察も高く評価されます。

ありがとうございました！

<https://jsfiddle.net/v9eu9gsL/> 

Answer 1

私は技術的に言えば、フロントエンドの聖書があった場合は、応答性の戒めは汝コンテンツが表示されなければなら

ようなものを聞こえるだろうことを知っているとすべてのデバイスでアクセス可能です。

しかし、デザインの背景を持つ、私は

としてそれを読むための傾向を持っている汝コンテンツは動作し、どのデバイスで壊れ見てはなりません。

をこれは、私はそれを修正したい方法です...：

さて、関係なく、私はこれを見てどのように、それは技術的に反応するのですが、私には壊れ見えません。

@media (max-width: 767px) { 
    .tabs { 
    display: flex; 
    } 
    .tabs li { 
    max-width: 33.33%; 
    flex: 1 1 33.33%; 
    } 
    .tabs li a { 
    overflow: hidden; 
    text-overflow: ellipsis; 
    box-sizing: border-box; 
    width: 100%; 
    } 
} 
@media (max-width: 419px) { 

    .tabs { 
    flex-wrap: wrap; 
    } 
    .tabs li { 
    width: 100%; 
    flex: 1 0 100%; 
    max-width: 100%; 
    } 
    .tabs li a { 
    white-space: normal; 
    } 
} 

jsFiddle

Answer 2

.ui-tabs .ui-tabs-nav li { 
    white-space: normal; 
} 

https://jsfiddle.net/w0x7ju9y/