CODEWITHSUNDEEP
htmlcss
Ben
Ben

Reputation: 235

css: how to keep a small group of words together without linebreak and without overflow

I have a list of tags that need to be displayed next to each other, and moving to the next line if flowing out of the box. These tags have spaces ('test completed', 'test ongoing',...), and I want to keep the whole tag text on one line (no break in the middle of a tag).

I tried to display the tags as a span with white-space: nowrap; but then it flows out of the box!

So basically I need the white-space: nowrap within the tag, but a normal break around the tags.

Is that possible?

Upvotes: 0

Views: 1230

Answers (2)

EliTownsend
EliTownsend

Reputation: 181

Without seeing the code, I would try putting a parent container around your tags so you can display everything inline-block and make sure the width of the elements are great enough:

.parent span{
display: inline-block;
white-space: nowrap; 
width: auto;
}
<div class="parent">
<span>test completed</span>
<span>test ongoing</span>
<span>another test</span>
</div>

Upvotes: 3

lkrocek
lkrocek

Reputation: 50

Not sure if I understand you correctly but it should works, maybe had overloaded another css rules, have a look: 

div {
  width: 360px;
  background: #f00;
  margin: 10px;
  line-height: 1.6em;
  white-space: initial;
}
.tag {
  background: #000;
  color: #fff;
  margin: 0 2px;
  padding: 0 3px;
  border: solid 2px green;
  white-space: nowrap;
  line-height: 1.2em;
  height: 1.2em
}
<div>
  <span class="tag">adx cvxc bbgdfg </span>
  <span class="tag">adadxcz cvxc bbgdfg </span>
  <span class="tag">adadxcz cvxc bbgdfg </span>
  <span class="tag">adadxcz cvxc bbgdfg </span>
</div>

Upvotes: 0

Related Questions