Question

我的input type radio。 label周围有一个span和一个label。我在width上有一个span修正案，我试图用word-wrap: break-word来破解。它没有用，但我不知道为什么。如果label和input周围有否 span元素，则相同的CSS规则有效。我无法弄清楚原因。我知道，我也可以在没有input的情况下使用label和span，但这就是我必须这样做的方式。有任何想法吗？希望它足够清楚。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

您的.form__label已white-space: nowrap;删除该内容，它将有效。

希望这有帮助

自动换行：break-word无法处理带有输入和标签的span

1 个答案: