自动换行：断词不适用于带有输入和标签的跨度

Question

我有一个input与type radio. 有一个label周围和一个span内部label。我已经修复width了，span并且正在尝试打破这个说法word-wrap: break-word。它不起作用，但我不知道为什么。如果和周围没有 元素，则相同的规则有效。我不明白为什么。我知道，我也可以只使用and不使用，但这是我必须这样做的方式。有任何想法吗？希望它足够清楚。labelinputspanCSSinputlabelspan

.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

你.form__label已经white-space: nowrap;删除了它，它会起作用。

希望这可以帮助