爲什麼我的文本只在大部分文本被繪製在元素外部之後纔打包？

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;
• 添加寬度以所述段
• 改變了spansdivs到

.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%; 
 
}

<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>