Question

如何在调整大小时阻止换行？

<div class="wrapper">
    <div class="left">Left Left Left Left Left Left Left Left Left Left </div>
    <div class="right">Right Right Right Right Right Right Right Right Right</div>
</div>

无论窗口宽度设置如何，我都希望两个div并排...

.wrapper {
    max-width: 990px;
    width: 100%;
    margin: 0 auto;
    background-color: cornflowerblue;
}
.left {
    float: left;
}
.right {
    float: right;
}

https://jsfiddle.net/m5d9jkxq/

谢谢！

Answer 1

省略号会为你工作吗？

CSS：

.wrapper {
    max-width: 990px;
    width: 100%;
    margin: 0 auto;
    background-color: cornflowerblue;
}
.left {
    float: left;
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden;
    width:50%
}
.right {
    float: right;
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden;
    width:50%;
}

演示：https://jsfiddle.net/lotusgodkk/m5d9jkxq/2/

Answer 2

当窗口大小不足以显示所有内容时，您没有描述'left'和'right'div的预期行为。

以下是基于CSS3中'flexbox'的解决方案。

.wrapper {
    max-width: 990px;
    width: 100%;
    margin: 0 auto;
    background-color: cornflowerblue;
    display: flex;
    justify-content: center;
}

.left {
}

.right {
}

JSfiddle

有关flexbox工作原理的详细信息，请查看A Complete Guide to Flexbox

Answer 3

如果您希望所有这一切始终在一行，您会看到两个问题。首先，左右浮动仍将相互撞击并将下部向下推到下一行。第二个问题是如果你只是设置一个宽度，如果文本太长，你的文本将换行到下一行。

因此，要修复第一部分设置最大宽度 - 这可以防止div相互碰撞。这当然是第二个问题，所以要纠正它，将白色空间设置为nowrap，这样文本总是只在一行上。然后溢出隐藏以隐藏任何重叠。

.wrapper div{
    max-width: 50%;
    white-space: nowrap;
    overflow: hidden;
}

https://jsfiddle.net/daCrosby/m5d9jkxq/4/

如果您只想并排div并且不关心这一行，只需将其保留在最大宽度50％：

.wrapper div{
    max-width: 50%;
}

Answer 4

没有重叠的单词

＆＃13;

.wrapper {
  max-width: 990px;
  width:100%;
  margin: 0 auto;
  white-space: nowrap;
  text-align:center;
}
.left {
  display: inline;
}
.right {
  display: inline;
}

＆＃13;

<div class="wrapper">
  <div class="left">Left Left Left Left Left Left Left Left Left Left</div>
  <div class="right">Right Right Right Right Right Right Right Right Right</div>
  </div

＆＃13;

如果您对重叠的单词没问题，

＆＃13;

.wrapper {
  max-width: 990px;
  width: 100%;
  margin: 0 auto;
}
.left {
  float: left;
  width: 50%;
  white-space: nowrap;
}
.right {
  float: right;
  width: 50%;
  white-space: nowrap;
}

＆＃13;

<div class="wrapper">
  <div class="left">Left Left Left Left Left Left Left Left Left Left</div>
  <div class="right">Right Right Right Right Right Right Right Right Right</div>
</div>

＆＃13;

Answer 5

如果您不介意重叠，只需将CSS更改为：

.left {
    position: absolute;
    left: 0%;
}

.right {
    position: absolute;
    right: 0%;
}

https://jsfiddle.net/v7vx2wjd/

如何在调整大小时阻止换行？

5 个答案: