2

類似の質問がたくさんあることは知っていますが、どれもこれを解決するのに役立ちませんでした。私は非常に簡単なセットアップをしています：

.wrapper {
  width: 100%;
  display: table;
}

.dontBreakmyLine {
  display: table-cell;
}

.iCanUseWhatIsLeft {
  display: table-cell;
}
<div class="wrapper">
  <div class="dontBreakmyLine">
    Some generated text
  </div>
  <div class="iCanUseWhatIsLeft">
    Another generated text
  </div>
</div>

ここで、最初の div をコンテンツに拡張し、別の div に残りのスペースを確保する必要があります。最初の div で生成されるテキストの最大幅が 300px になることはわかっていますが、ここでは max-width が機能しません。何か提案はありますか？

4

2 に答える 2

8

おそらくもっと良い方法がありますが、行が途切れなくても問題ない場合は、左のセルを小さな幅に設定し、テキストが空白で途切れないように設定できます

ここにフィドルがあります

http://jsfiddle.net/hqWaU/

.wrapper {
    width: 100%;
    display: table;
}
.dontBreakmyLine {
    display: table-cell;
    width: 1px;
    white-space:nowrap;
}
.iCanUseWhatIsLeft {
    display: table-cell;
}
div {
    border: 1px solid silver;
}
于 2013-10-11T14:29:57.353 に答える
1

なしで可能な解決策は、display: table;両方のボックスを に設定しposition: relative;、左側をフロートさせ、右側をright: 0px;( DEMO ) で引き伸ばすことです。

.wrapper {
    width: 100%;
}

.dontBreakmyLine {
    max-width: 300px;
    float: left;
    position: relative;
    z-index: 2;
}

.iCanUseWhatIsLeft {
    position: relative;
    right: 0px;
    z-index: 1;
}

これより長くなるとすぐにテキストが壊れますが、長く300pxならなければ問題ありません。display: table-cell左のテキストの下に右のテキスト フローが必要ない場合は、ボックスに追加します。

それでも改行を防止したくない場合は、 ( DEMOwhite-space:nowrap; )と組み合わせて使用​​することもできます。overflow: hidden;

于 2013-10-11T14:33:50.870 に答える