HTML/CSS: How to avoid extra whitespace after using "white-space:normal"

Question

I have a simple table and in each row, I have multiple span tags. Each span can have text with different lengths(I just show the structure here):

.label {

  float: left;
  text-transform: uppercase;
  font-size: 12px;
  padding: 0.6em 1em;
  /*display: inline;
  padding: .2em .6em .3em;
  font-size: 80%;*/
  font-weight: normal;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25em;
  margin-right: 5px;
  margin-bottom: 5px;
}

.label-default2
{
    background-color:#e8e8e8;
    color: #888;
}

    .label-default2[href]:hover,
    .label-default2[href]:focus
    {
        background-color: #777;
    }
    
.top2 {
    margin-top: 2px;
}

.left {
  float:left;
}

<table>
 <tbody>
  <tr>
   <small class="left top2">
    <span class="label label-default2" style='white-space:normal; text-align:left;word-break:break-word;'>
     Cura - Mlrettet SOSU-Helper
    </span>
   </small>
   <small class="left top2">
    <span class="label label-default2" style='white-space:normal; text-align:left;word-break:break-word;'>
     Cura - Guided Borgerkonsulent og Visitator
    </span>
   </small>
  </tr>
 </tbody>
</table>

I almost get the result I want which is to move text to a new line if it is large. My only problem is now that I get some extra whitespace (in the gray area) as can been seen in the screenshot:

And I'd like it to be like:

Is there any way I can get rid of the extra whitepsace ? Thanks in advance

Please update your snippet to show the actual problem you are having, so we can help you fix it! — FluffyKitten, Oct 16 '17 at 15:12
@Paulie_D maybe I've picked it up wrong, but is that not exactly what the OP *wants*? (I admit I might have got it wrong because the question is rather vague about exactly what is required) — FluffyKitten, Oct 16 '17 at 15:41
No...he wants the grey "space" to go away and you can't do that...that's not the way the line-box model works. Also - https://stackoverflow.com/questions/37406353/make-container-shrink-to-fit-child-elements-as-they-wrap — Paulie_D, Oct 16 '17 at 15:48
@Paulie_D See, I didn't think the OP wanted the *container* to shrink, I thought they were having a problem with extra white space in highlighted text... but like I said they question is so vague and has no MCVE, so there are too many interpretations. — FluffyKitten, Oct 16 '17 at 15:58
It's the same issue...that's the way the line-box model works...the space is reserved for the text even though it's broken...the "container" is the `span` here. — Paulie_D, Oct 16 '17 at 16:01
@Paulie_D This is what I thought they ultimately want to see based on the image (because there's no code to go on) - i.e. the extra space isn't highlighted: https://jsfiddle.net/x3guL4nv/. But I guess its moot - even if its not a duplicate, it still should be closed because its too vague. — FluffyKitten, Oct 16 '17 at 16:06
@FluffyKitten The code snippet is exactly what I have uploaded here. I just replaced the contents of the table with **Some text** so it wouldn't take so much space in the question. Yes, shrink is the exact word I was looking for. I want the gray area around the text to shrink after the long text is broken and forced to go to the next line — arvind, Oct 16 '17 at 18:06
So if the snippet is exactly what you uploaded, where is the grey highlighting coming from? — FluffyKitten, Oct 16 '17 at 18:38

HTML/CSS: How to avoid extra whitespace after using "white-space:normal"

0 Answers0