如果可以将heading，html中的两行分隔开，您可以这样做：

<header>
        <div>
            <div class="first-line">
                <p>
                    sample title, pretty long

                <div className={css.container}>
                    <div className={css.shine1}></div>
                    <div className={css.shine2}></div>
                    <div className={css.shine3}></div>
                </div>
                </p>
            </div>
            <p>
                that is wrapping in two lines
            </p>
        </div>
    </header>

CSS：

header .first-line{
  position: relative;
  display: inline-block;
}
.container {
  position: absolute;
  display: inline;
  top: 20px;
  right: 5px;

  
}
.container div {
  position: absolute;
  height: 5px;
  border-radius: 5px;
  background-color: red;
  transform-origin: bottom left;
}
.shine1 {
  width: 26px;
  transform: rotate(-95deg) translate(20px, 5px);
}
.shine2 {
  width: 32px;
  transform: rotate(-45deg) translate(20px);
}
.shine3 {
  width: 26px;
  transform: rotate(0deg) translate(15px);
}

我已经想通了。
虽然我的解决方案非常“笨拙”，但它在我想到的任何测试用例中都能很好地工作。
我的解决方案是用相同的css属性在标题的第一行创建一个隐藏的副本，然后得到副本的宽度，用这个值定义sunshines的left属性。
下面是我用来获取第一行文本的函数：

const getFirstLine = el => {
  const text = el.innerHTML;

  //set the innerHTML to a character
  el.innerHTML = 'a';
  //get the offsetheight of the single character
  const singleLineHeight = el.offsetHeight;

  //split all innerHTML on spaces
  const arr = text.split(' ');

  //cur is the current value of the text we are testing to see if
  //it exceeds the singleLineHeight when set as innerHTML
  //prev is the previously tested string that did not exceed the singleLineHeight
  //cur and prev start as empty strings
  let cur = '';
  let prev = '';

  //loop through, up to array length
  for (let i = 0; i < arr.length; i++) {
    //examine the rest of text that is not already in previous string
    const restOfText = text.substring(prev.length, text.length);

    //the next space that is not at index 0
    const nextIndex =
      restOfText.indexOf(' ') === 0
        ? restOfText.substring(1, restOfText.length).indexOf(' ') + 1
        : restOfText.indexOf(' ');

    //the next part of the rest of the text
    cur += restOfText.substring(0, nextIndex);

    //set the innerHTML to the current text
    el.innerHTML = cur;

    //now we can check its offsetHeight
    if (el.offsetHeight > singleLineHeight) {
      //once offsetHeight of cur exceeds singleLineHeight
      //previous is the first line of text
      //set innerHTML = prev so
      el.innerHTML = prev;
      //we can grab the innertext
      const firstLine = el.innerText;
      const indexOfSecondLine = prev.lastIndexOf('<');

      //reset el
      el.innerHTML = text;

      return firstLine;
    }

    //offsetheight did not exceed singleLineHeight
    //so set previous = cur and loop again
    //prev = cur + ' ';
    prev += cur.substring(prev.length, cur.length);
  }
  el.innerHTML = text;
  return text;
};

如果你想做同样的小心等待字体的网页被加载或宽度你将得到将是错误的

document.fonts.ready.then(function () {})

我还设法处理了当标题具有text-align: center;属性时的情况，方法是将margin-left/right: auto;添加到副本，然后使用以下命令将副本添加到计算出的left中：

parseInt(window.getComputedStyle(invisibleTitle).marginLeft)

我知道它并不完美，但由于在css中没有简单的方法来做到这一点，这是我找到的唯一有效的方法。