CSS

Question

我有一个 inline-block 元素，我想在其上放置一个 border-bottom，但是当该元素内的文本换行到下一行时，它会将边框放在两行的底部文本，而不仅仅是元素的底部。

这是一个演示：

这是相关的 SCSS：

div {
  width: 150px;
  text-align: center;
  span {
    border-bottom: 20px solid rgba(0,0,0,0.3);
  }
}

如何让它只将边框放在元素的底部？

我必须使用 display: inline-block 而不能只使用 display: block 的原因：

我需要文本能够换行，因为屏幕尺寸是小
我无法在 span 上指定定义的宽度，它需要根据文本是否适合 1 行或多行（取决于屏幕宽度）来更改宽度)
跨度需要在div

text-align: center

Answer 1

您可以将跨度包装在 div 中并将 border-bottom 分配给 div。

添加包装器div

<div>
  <div class='wrap'>
    <span>
      This is a long sentence.
    </span>
  </div>
</div>

分配border-bottom是SCSS

div {
  background: rgba(0,0,0,0.1);
  width: 150px;
  margin: 100px auto;
  padding: 20px;

  text-align: center;

  div {
    padding: 0;
    border-bottom: 20px solid rgba(0,0,0,0.3);
    span {

      font-size: 24px;

    }
  }
}

这是一个有效的 codepen。

Answer 2

我把你的 SCSS 改成了这个，对我来说效果很好：

div {
  width: 150px;
  text-align: center;
  span {
    display: inline-block;
    border-bottom: 20px solid rgba(0,0,0,0.3);
  }
}

就像你说的那样，将 display: inline-block; 添加到跨度即可。默认情况下，<span> 元素是 display: inline; 而不是 display: inline-block;.

CSS - 显示带有边框和文本溢出的内联块元素

CSS - Display inline block elements with a border and text-overflow

sass