CSS - 內聯塊100％寬度

我有兩個文本塊。文本的長度不是固定的（用戶輸入）。左側的塊中有短文本，但右側塊可能包含非常長的文本。塊應該並排顯示，並分散在父母的恆定寬度的100％上，不能少於100％。CSS - 內聯塊100％寬度

<div style="white-space: nowrap; font-size: xx-large;"> 
    <span>woohoo</span> 
    <div style="display: inline-block; overflow-wrap: break-word; width: 100%; white-space: normal; vertical-align: top;">gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg 
    </div> 
</div>

在此解決方案的問題是，有一個水平滾動條，因爲右塊需要其父寬度的100％，但是由於COMULATIVE寬度應採取以下兩塊應該是100％。

任何想法？

謝謝！

來源

2017-08-21 Ella Shar

您可以使用flexbox完成此操作，並使用更少的CSS。

.container { 
 
    display: flex; 
 
} 
 

 
.container div { 
 
    margin-left: .5em; 
 
    word-break: break-word; 
 
}

<div class="container"> 
 
    <span>woohoo</span> 
 
    <div>gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg 
 
    </div> 
 
</div>

來源

2017-08-21 21:41:30

嗚呼！有效！這個單詞有什麼用呢？但是，爲什麼它不能用'換行'（break-word）（只是好奇，因爲這件事讓我浪費了幾個小時）？ –

@EllaShar Flexbox扭結，我相信 - 因爲您需要指定一個寬度才能使用「自動換行」。 –

所以官方文檔真的很讓人困惑，我認爲'word break'只是針對CJK（亞洲）語言:( –

-1

CSS

.container { 
    width: 100%; 
    box-sizing: border-box; 
    font-size: xx-large; 
} 
.left { 
    width: 150px; 
    overflow: hidden; 
    float: left; 
} 
.right { 
    width: calc(100% - 150px); 
    float: right; 
    word-break: break-all; 
    display: inline-block; 
}

HTML

<div class="container"> 
    <div class="left">woohoo</div> 
    <div class="right">gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg 
    </div> 
</div>

white-space: nowrap;將打破當前的結果。爲了更好的div寬度，你可以使用一些javascript來計算它。

來源

2017-08-21 22:21:53

）謝謝，但左邊的寬度不是常數 –

這裏使用javascript來動態設置寬度;

<html> 
    <head> 
     <style> 
      #container { 
       width: 100%; 
       box-sizing: border-box; 
       font-size: xx-large; 
      } 
      #left { 
       overflow: hidden; 
       float: left; 
      } 
      #right { 
       float: right; 
       word-break: break-all; 
       display: inline-block; 
       margin-left: 10px; 
      } 
     </style> 
     <script> 
      function setWidth() { 
       document.getElementById("left").style.width = document.getElementById('textIsHere').offsetWidth; 

       //you should include all margins for #left and #right element 
       document.getElementById("right").style.width = document.getElementById('container').offsetWidth - document.getElementById('left').offsetWidth - 10; 
      } 
     </script> 
    </head> 
    <body onload="setWidth()"> 
     <div id="container" onclick="setWidth()"> 
      <div id="left"><span id="textIsHere">woohoo</span></div> 
      <div id="right" >gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg 
      </div> 
     </div> 
    </body> 
<html>

來源

2017-08-21 23:01:41

CSS - 內聯塊100％寬度

回答

相關問題