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

Question

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

这是一个演示:

http://codepen.io/Tiger0915/pen/azpeVY

这是相关的 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 行或多行(取决于屏幕宽度)来更改宽度

• span 需要在 div 内 text-align: center

Answer 1

我将您的 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; .