添加与多行 h1 的最长文本行一样宽的边框

Question

我需要装饰一些非常大的多行标题，并在它们上方加粗边框。 边框应始终与文本块中最长的行一样长，但不能超过此长度。 这是一张图片来说明它应该是什么样子：

我发现了一大堆解决类似问题的问题，但没有一个完全适合我的问题。

到目前为止，我已经尝试了不同的方法，可以在下面的小提琴中找到。

• 将标题设置为inline-block 并添加一个顶部边框或:before 元素，这非常适合单行标题，但是一旦文本换行，inline-block 元素就会扩展为100% 宽度和边框结束太长了。 （对应小提琴中的黄色和红色边框）
• 将文本包装在跨度中，设置跨度相对并尝试绝对定位边框。当最后一行文本最长时，这很有效，但是当最后一行比之前的短时，边框最终会太短。 （对应小提琴中的蓝色边框）
• 在内联元素上添加border-top，这当然会导致所有文本行都有边框。 :first-line 伪类之类的东西在这里可能会有所帮助，但我找不到类似的东西。

我还尝试摆弄设置 display: inline-block; 和设置 width: max-content 或 width: fit-content，但这些仅在我手动添加换行符时才对我的问题有效，而不是在文本自行换行时。

https://jsfiddle.net/rj8k2tmg/56/

body {
  width: 700px;
}

h1 {
  font-family: sans-serif;
    margin-top: 0.75em;

    position: relative;
    max-width: max-content;

    text-transform: uppercase;
}

.headline:before {
  content: '';
  display: block;
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  border: 0;
  border-top: 4px solid red;
}


.headline__wrapper {
  display: inline;
  position: relative;
}

.headline__wrapper:before {
  content: '';
  display: block;
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  border: 0;
  border-top: 4px solid blue;
}

.headline__inline-border {
  border-top: 4px solid green;
}

<p>Before Element on headline, doesn't fit when text wraps</p>
<h1 class="headline">
  Short headline
</h1>

<h1 class="headline">Long headline that wraps, first&nbsp;line&nbsp;shorter&nbsp;than&nbsp;the&nbsp;2nd</h1>


<h1 class="headline">Long&nbsp;headline&nbsp;that&nbsp;wraps, the 2nd line should be shorter.</h1>

<hr>

<p>Works fine for cases 1 and 2, but not for case 3 where the second line is shorter.</p>

<h1 class="headliner__w-wrapper">
  <span class="headline__wrapper">
     Short headline
  </span>
</h1>

<h1 class="headliner__w-wrapper">
  <span class="headline__wrapper">
    Long headline that wraps, first&nbsp;line&nbsp;shorter&nbsp;than&nbsp;the&nbsp;2nd
    </span>
</h1>


<h1 class="headliner__w-wrapper">
  <span class="headline__wrapper">
    Long&nbsp;headline&nbsp;that&nbsp;wraps, the 2nd line should be shorter.
    </span>
</h1>

<hr>

<p>Border-top on inline-wrapper / Adds border on all lines</p>

<h1 class="headliner__w-wrapper">
  <span class="headline__inline-border">
     Short headline
  </span>
</h1>

<h1 class="headliner__w-wrapper">
  <span class="headline__inline-border">
    Long headline that wraps, first&nbsp;line&nbsp;shorter&nbsp;than&nbsp;the&nbsp;2nd
    </span>
</h1>

<h1 class="headliner__w-wrapper">
  <span class="headline__inline-border">
    Long&nbsp;headline&nbsp;that&nbsp;wraps, the 2nd line should be shorter.
    </span>
</h1>

Answer 1

试试这个：

1. 为标题添加边框。
2. 给标题显示：inline-block;

这是一个例子：

HTML：

<h1>Add border 
as wide 
as the longest text line blah
of 
multiline h1</h1>
<p>Some more page content</p>

CSS：

h1 {
    display: inline-block;
    border-top: 2px solid #000;
    white-space: pre-wrap;
}

white-space: pre-wrap; 不是必需的，它只是为了让您更好地控制标题中的行长（这些行会在您在 HTML 代码中中断它们的地方中断）。 :-)

Answer 2

由于任何普通方法都无法做到这一点，我想我会尝试一些有点奇怪的东西，所以这里有一个（不是很漂亮的）概念证明：

• 使用仍然逐行运行的少数几个属性之一，我们在标题的每一行添加一个巨大的border-top，它将延伸到上述行并到达所需的位置（多余的被切断overflow: hidden)

这给我们留下了这样的东西：

• 然后将mix-blend-mode (Documentation)(Browser support) 与线性渐变背景一起使用，以有效地“掩盖”跨度顶部4px 的边框。

.tester {
  resize: both;
  overflow: auto;
  border: 2px solid #555;
  padding: 20px 0;
}

.headline {
  position: relative;
  background-color: #fff;
  font-family: sans-serif;
  margin-top: 0.75em;
  max-width: max-content;
  text-transform: uppercase;
  overflow: hidden;
  padding-top: 4px;
}

.headline span {
  border-top: rgba(0,0,0,0.5) 1000px solid;
}

.headline::after {
  position: absolute;
  content: '';
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(180deg, #000 0%, #000 4px, #fff 4px, #fff 100%);
  mix-blend-mode: color-dodge;
}

You can resize this container:
<div class="tester">
  <h1 class="headline"><span>This is a long headline that should wrap in various places.</span></h1>
</div>

（上面的例子可以调整大小以测试其他标题长度）

再次重申：在这种状态下，这对于面向客户的内容来说绝对不够好，但也许更熟悉混合模式的人可以采用这种方法并使其可行。