Question

这个HTML有两个部分，并排。我不希望第二段包装在第一段之下，但是我希望两者中的文本都包含在它们的段中。

另外，我理想情况下两个片段同时缩小。我知道我可以使用flexbox - 所以如果这是我唯一的选择，那么公平，但如果还有另一种方式我想学习。这对我来说不是一个重要的问题。

更重要的是包装。为什么它最终会包裹，但只有在包含元素非常小的情况下？如果我删除容器中的white-space:nowrap，那么文本都会按照我的预期包装 - 但是第二个段包装在第一个段下面，这是我不想要的。

如何并排显示这些片段，但是在片段之外绘制之前是否将其中的文字换行？

这是HTML / CSS：

.container {
  text-align: left;
  background-color: grey;
  padding: 1rem;
  border-radius: 4px;
  white-space: nowrap;
  display: inline-block;
}

.title {
  font-size: 1.5rem;
}

.text {
  font-size: 0.8rem;
  font-weight: 300;
}

.segment {
  display: inline-block;
  white-space: normal;
}

<div class="container">
  <span class="segment">
    <div class="title">Timeline</div>
    <div class="text">Here's a bunch of text that is very nice and long and I wish it would start wrapping before it does.</div>
  </span>
  <span class="segment">This is also some nice text but it draws way out of the element before it starts wrapping.</span>
</div>

Answer 1

查看以下示例。这是你想要的结果吗？

我所做的改变是：

删除white-space: nowrap;
为细分添加了宽度
将spans更改为divs

＆＃13;

.container {
  text-align: left;
  background-color: grey;
  padding: 1rem;
  border-radius: 4px;
  display: inline-block;
}

.title {
  font-size: 1.5rem;
}

.text {
  font-size: 0.8rem;
  font-weight: 300;
}

.segment {
  display: inline-block;
  white-space: normal;
  width: 49%;
}

＆＃13;

<div class="container">
  <div class="segment">
      <div class="title">Timeline</div>
      <div class="text">Here's a bunch of text that is very nice and long and I wish it would start wrapping before it does. </div>
  </div>
  <div class="segment">This is also some nice text but it draws way out of the element before it starts wrapping.</div>
</div>

＆＃13;

为什么我的文本在大部分文本被绘制到元素之外时才会换行？

1 个答案: