word-wrap: break-word 不适用于带有输入和标签的跨度

Question

我有一个 input 和 type radio。周围有一个label，label里面有一个span。我在 span 上有一个修复程序 width，我正在尝试打破 word-wrap: break-word 的说法。它不起作用，但我不知道为什么。如果 input 和 span 周围没有 label 元素，则相同的 CSS 规则有效。我不知道为什么。我知道，我也可以只使用 input 和 label 而不用 span，但这是我必须这样做的方式。有任何想法吗？希望它足够清楚。

.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; 删除了它，它将起作用。

希望对您有所帮助

word-wrap: break-word 不适用于带有输入和标签的跨度

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

html

css

word-wrap