如何使 flexbox 子項不創建水平滾動

Question

這里的場景是，我將使用 Flexbox 的 React 標頭組件導入到包含大量 Flexbox css 的頁面上。 我只能訪問myDiv （並且可以創建myDiv div），但是我正在努力讓標頭組件截斷或換行到多行。

如果我以像素為單位指定頁面的特定寬度，我的問題就解決了，但是有沒有辦法告訴標題組件不要擴展到給定的空間之外？ 這也需要在 IE11 中工作。

想要一些有關如何調試此場景的提示。 謝謝！

 .myDiv { // Can edit this class } .outerContainer3 { // Cannot edit this class margin-top: 0; flex-direction: column; flex: 1 0 auto; display: flex; } .outerContainer2 { // Cannot edit this class flex: 1 0 auto; display: flex; flex-direction: row; } .outerContainer1 { // Cannot edit this class position: relative; flex: 1 1 auto; } .headerContainer2 { // Cannot edit this class align-items: center; display: flex; justify-content: space-between; } .headerContainer1 { // Cannot edit this class min-width: 0%; flex-shrink: 1; width: 100%; } .header { // Cannot edit this class overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

 <div class="outerContainer3"> <div class="outerContainer2"> <div class="outerContainer1"> <div> <div> <div class="myDiv"> <div class="headerContainer2"> <div class="headerContainer1"> <h1 class="header">asdfkasdjlfkasdjfla sjdlfkja sldkfj alskfj lskdjf laskdjf laskjf akjf lsakfjs lak jfkjflakj flkajds lakj f</h1> </div> </div> </div> </div> </div> </div> </div> </div>

Answer 1

如果您能夠添加一些 css，那么這個可以幫助您。

更新：我添加了“位置：絕對；” 按照這種方式，h1 元素不會擴展到 div 元素之外，並且它在 IE 中工作。
此外，您可能對值為 ' break-word ' 的屬性 ' word-wrap ' 感興趣。 這應該可以幫助您在沒有空格的情況下包裝非常長的單詞（或網址）。

 .myDiv { // Can edit this class } .myDiv > div > div > h1 { white-space: inherit; position: absolute; } .outerContainer3 { // Cannot edit this class margin-top: 0; flex-direction: column; flex: 1 0 auto; display: flex; } .outerContainer2 { // Cannot edit this class flex: 1 0 auto; display: flex; flex-direction: row; } .outerContainer1 { // Cannot edit this class position: relative; flex: 1 1 auto; } .headerContainer2 { // Cannot edit this class align-items: center; display: flex; justify-content: space-between; } .headerContainer1 { // Cannot edit this class min-width: 0%; flex-shrink: 1; width: 100%; } .header { // Cannot edit this class overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

 <div class="outerContainer3"> <div class="outerContainer2"> <div class="outerContainer1"> <div> <div> <div class="myDiv"> <div class="headerContainer2"> <div class="headerContainer1"> <h1 class="header">asdfkasdjlfkasdjfla sjdlfkja sldkfj alskfj lskdjf laskdjf laskjf akjf lsakfjs lak jfkjflakj flkajds lakj f</h1> </div> </div> </div> </div> </div> </div> </div> </div>

Answer 2

向 outerContainer1 和 myDiv 元素添加最大寬度。

 .myDiv { max-width: 100%; } .outerContainer3 { margin-top: 0; flex-direction: column; flex: 1 0 auto; display: flex; } .outerContainer2 { flex: 1 0 auto; display: flex; flex-direction: row; } .outerContainer1 { position: relative; flex: 1 1 auto; max-width: 100%; } .headerContainer2 { align-items: center; display: flex; justify-content: space-between; } .headerContainer1 { min-width: 0%; flex-shrink: 1; width: 100%; } .header { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

 <div class="outerContainer3"> <div class="outerContainer2"> <div class="outerContainer1"> <div> <div> <div class="myDiv"> <div class="headerContainer2"> <div class="headerContainer1"> <h1 class="header">asdfkasdjlfkasdjfla sjdlfkja sldkfj alskfj lskdjf laskdjf laskjf akjf lsakfjs lak jfkjflakj flkajds lakj f</h1> </div> </div> </div> </div> </div> </div> </div> </div>