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 中生成的文本的最大宽度为 300 像素，但 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

A possible solution without display: table; would be to set both boxes to position: relative;, float the left and stretch the right one with 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;
}

The text will break as soon as it's longer than 300px but If it won't be longer it doesn't matter. Add display: table-cell back to the boxes if you don't want the right text flow under the left text.

If you still wan't to prevent the line-break you can use white-space:nowrap; maybe even in combination with overflow: hidden; (DEMO).

于 2013-10-11T14:33:50.870 回答