CODEWITHSUNDEEP
htmlcss
WillyC
WillyC

Reputation: 4705

Why is my text wrapping only after most of it is drawn outside of the element?

This HTML has two segments, side by side. I don't want the second segment to wrap under the first one, however I want the text in both to wrap within their segments.

Also, I'd ideally like both segments to shrink at the same time. I understand I can use flexbox for this - so if that's my only option, fair enough, but if there's another way I'd like to learn. This is not as important a concern to me at the moment.

More important is the wrapping. Why does it eventually wrap but only after the containing element is ridiculously small? If I remove the white-space:nowrap in the container, then the text all wraps as I'd expect - but the second segment wraps under the first one, which I don't want.

How do I have the segments side by side, but have the text in them wrap before drawing outside of the segment?

Here's the 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>

Upvotes: 0

Views: 43

Answers (1)

indubitablee
indubitablee

Reputation: 8206

Check out the example below. Is that the result you were going for?

The changes I made were:

  • Remove white-space: nowrap;
  • Added widths to the segments
  • Changed the spans to divs

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

Upvotes: 3

Related Questions