word-wrap: break-word not working on span with input and label around

Question

I have a input with the type radio. There is an label around and a span within the label. I have a fix width on the span and I'm trying to break word with word-wrap: break-word. It's not working, but I don't know why. If there is no label element around the input and span, the same CSS rule works. I can't figure out why. I know, I also can just use input and label without the span, but this is the way how I have to do it. Any ideas? Hope it's clear enough.

.form__wrapper {
  display: inline-block;
  position: relative;
  width: 600px;
}

.form__label {
  display: flex;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
  width: 100%;
}

.form__input {
  position: relative;
}

.form__text,
.breaking-works {
    display: inline-block;
    margin-left: 25px;
    width: calc(600px - 450px);
    word-wrap: break-word;
    border: 1px solid black;
}

<div class="form__wrapper">
  <label class="form__label" for="formLabel">
    <input id="formLabel" class="form__input" type="radio">
    <span class="form__text">I'm a very very very looooooooooooooooooooong text!</span>
  </label>
</div>

<br><br>


<input id="formLabel" class="form__input" type="radio">
<span class="breaking-works">I'm a very very very looooooooooooooooooooong text!</span>

Answer 1

Your .form__label has white-space: nowrap; remove that and it will work.

Hope this helps