CSS overflowing / going beyond container div

Question

Please see picture attached, makes it easier to explain what I mean.

I'm using Bootstrap. I have a page with a col-md-4 and col-md-8. The col-md-4 has the list of countries as seen.

I'm facing two problems.

Why aren't my country labels 'wrapping' as soon as they hit the col-md-4 width? (you can see the vertical border) I just want them to flow to the next line without going across

Even when I artificially 'break' the labels after every X occurrences, I see this weird last label of a row breaking up and appearing on the next row (for e.g. see Cape Verde on the bottom of the picture)

Additional details:

Each of the country labels is basically a span

<div class='row'>
<div class="col-md-4">
    ...some other bootstrap tabs/panel stuff
    <div>
        <span class="mm-place" id="AU">Australia</span>
        <span class="mm-place" id="CA">Canada</span>
        ...
    </div>
</div>
</div>

and the mm-place class is defined below.

.mm-place {
  border-radius: 5px;
  border: 1px solid #cccccc;
  font-size: 10px;
  margin: 3px;
  padding: 3px;
}

FIXED: Just used display:inline-block in the mm-place style, and replaced spans with div.

Wrapping to the next line is how it's supposed to work - this is just text with a border, so if you think about writing out a paragraph of text it's going to move something to the next line whenever a word is too long, not a group of words — Dan
I fixed it. All I needed to do was replace the <span> with <div> and style mm-place with display: inline-block; — Gerry
display:inline-block would have been enough. You also need to make sure the parent doesn't have white-space:nowrap. If it does, set it to normal or initial. — tao

Dan Dan · Accepted Answer · 2016-12-25T18:41:54

Use white-space: nowrap; to prevent the text from being split across multiple lines

Updated CSS:

.mm-place {
  border-radius: 5px;
  border: 1px solid #cccccc;
  font-size: 10px;
  margin: 3px;
  padding: 3px;
  white-space: nowrap;  //added this
}

Bootply example here

Note that if any of the country names are larger than the col-md-4 on their own then the text for that line will be larger than the col-md-4. You can see info in this question for managing overflow text if it applies for you.

CSS overflowing / going beyond container div

1 Answers