CSS - 100％幅の横並びブロック

私はテキスト付きの2つのブロックを持っています。テキストの長さは一定ではありません（ユーザー入力）。左側のブロックには短いテキストが含まれていますが、右側のブロックには実際に長いテキストが含まれていることがあります。ブロックは並べて表示され、親の一定幅の100％以上に広がっている必要があります。CSS - 100％幅の横並びブロック

簡体例： https://jsfiddle.net/hh6a03cy/1/

<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

これは、フレックスボックスを使用して、CSSをはるかに少なくすることができます。

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

white-space: nowrap;

.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

Woohoo！出来た！単語のブレークはトリックでした！しかし、なぜそれは 'word-wrap：break-word'（ちょうど興味深いのは、このことが私に数時間を無駄にさせてしまったので）とうまくいかないのですか？ –

@EllaShar Flexbox kink、私は信じています - あなたは 'word-wrap'を使うために幅を指定する必要があるので、私は信じています。 –

公式の文書は本当に混乱しているので、私は '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の幅のためには、それを計算するためにいくつかの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％幅の横並びブロック

答えて

関連する問題