Question

如何让我的内联块自动调整其多线内容？检查我的小提琴，看看多行文字是如何破坏填充的。

.block {
  display: block;
  background-color: pink;
  width: 300px;
  height: 120px;
  margin-bottom: 10px;
}

.btn-holder {
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.btn {
  display: inline-block;
  @extend .label-text;
  background: none;
  border: 2px solid blue;
  text-decoration: none;
  padding: 1em;
  color: blue;
  text-align: center;
}

<a href="#" class="block">
  <div class="btn-holder">
    <span class="btn">lorem, ipsum &amp; dolor</span>
  </div>
</a>

<a href="#" class="block">
  <span class="btn-holder">
        <span class="btn">loremipsum, loremipsumdolor &amp; loremipsumdolor</span>
  </span>
</a>

Answer 1

只需将word-break元素添加到您的班级.btn 额外间距的原因： - 单词太大而不适合第一行的间距，因此进入下一行。有关详细信息： - https://developer.mozilla.org/en-US/docs/Web/CSS/word-break

.btn {
  display: inline-block;
  @extend .label-text;
  background: none;
  border: 2px solid blue;
  text-decoration: none;
  padding: 1em;
  color: blue;
  text-align: center;
  word-break: break-all;
}

如何自动调整内联块以适应其多行文本？

1 个答案: