在标题标签上显示内联块答案

【问题标题】：Display inline-block on title tag在标题标签上显示内联块
【发布时间】：2016-09-05 23:03:21
【问题描述】：

所以我想为 h3 标签添加边框。
此边框需要跨越边框最长部分的宽度可见文本，没有其他内容。
目前，此边框似乎跨越了包装的整个宽度 div。

在我看来，将显示内联块添加到 h 标记并不能提供我想要的结果。

div {
  max-width: 180px;
}
h3 {
  display: inline-block;
  border-bottom: 2px solid green;
}

<div>
  <h3>Lorem Ipsum Dolar.....</h3>
</div>

编辑：似乎你们中的一些人不明白 max-width 是必需的。

这就是它的排列方式。

嗯...似乎用 CSS 不可能有一个完美的解决方案。但我使用了@Muhammad Usman 示例并添加了bottom: -120%;，并用边框属性替换了高度和背景。适用于 2 行文本。

div {
  max-width: 200px;
  border: dashed 1px grey;
}
h3 {
  display: inline;
  font-size: 1.6em;
  position: relative;
}
h3::after {
  border-bottom: 4px solid green;
  bottom: -120%;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
}

<div>
  <h3>Lorem Ipsum Dolar</h3>
  <p>Lorem ipsum dolar set ammet Lorem ipsum dolar set ammet Lorem ipsum dolar set ammet Lorem ipsum dolar set ammet Lorem ipsum dolar set ammet</p>
</div>

【问题讨论】：

所以，如果我理解，max-width 是必需的，并且您希望您的边框与标题中最长的行一样长。而且我猜这个长度是未知的，对吧？
正是@JordiNebot。
这对于任何动态形式的 CSS 都可能是不可能的。这不是 line-box 模型的工作方式。 - 相关-stackoverflow.com/questions/34995740/…
正如我上面提到的......这是不可能的。 inline-block 标题并没有像你想象的那样收缩包装。链接的问答适用于此。

标签： html css

【解决方案1】：

删除最大宽度，只使用display: inline-block

div {
  }
h3 {
  display: inline-block;
  border-bottom: 2px solid green;
  }

<div>
<h3>Lorem Ipsum Dolar.....</h3>
 </div>

【讨论】：

这不能回答我的问题。
@TeutaKoraqi 所以你认为我在包装 div 中添加了一个最大宽度是为了好玩？
没有直接的问题。 “此边框需要跨越可见文本最长部分的宽度”是最接近问题的内容，我为您提供了解决方案。
如果 max-width 180px 是强制性的，那么您已经在问题中得到了答案 - ?
我不认为边框会拉伸包含 div 而不是文本的整个宽度。根据我的问题。

【解决方案2】：

这是你想要的吗？

div {
  max-width: 180px;
  width:111px;
}
h3 {
  display: inline-block;
  border-bottom: 2px solid green;
}

<div>
  <h3>Lorem Ipsum Dolar.....</h3>
</div>

【讨论】：

然后线正在拉伸包装div的宽度。不是正文中最长的部分。
你不明白问题所在。
抱歉不明白。你想要那个边界直到美元......？
@dfsq 可能是..你能解释一下吗？
你不能硬编码width:111px; 这应该是自动的，因为它会根据文本而变化。

【解决方案3】：

为您的“div”添加 Display:inline 属性

 div {
        max-width: 180px;
        display: inline;
    }

【讨论】：

【解决方案4】：

div {
  max-width: 180px;
}

h3 {
  position: relative;
  display: inline;
}


h3:before {
  position: absolute;
  background: green;
  content: '';
  height: 2px;
  left: 0;
  right: 0;
  bottom: -4px;
}

<div>
  <h3>Lorem Ipsum Dolar Lorem Ipsum Dolar gnhhjkui abc .....</h3>
</div>

【讨论】：

【解决方案5】：

所以我想我会更新这个问题，因为没有其他人找到答案。

可以在使用flexbox的时候，把title标签用div包裹起来，然后应用flex就可以了。

div {
  max-width: 200px;
  border: dashed 1px grey;
}
div.flex {
  display: flex;
  flex-flow:row wrap;
  }
h3 {
  display: inline;
  font-size: 1.6em;
  border-bottom: 4px solid green;
}

<div class="flex">
<h3>Lorem Ipsum <br>Dolar</h3>
  <p>Lorem ipsum dolar set ammet Lorem ipsum dolar set ammet Lorem ipsum dolar set ammet Lorem ipsum dolar set ammet Lorem ipsum dolar set ammet</p>
</div>

【讨论】：