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行或多行（取决于屏幕宽度）来更改宽度< / p>
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;。

Answer 2

您可以将范围包装在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。

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

2 个答案: