javascript - HTML CSS 如何去掉首字母而不是首字母？

Question

我针对 iOS NSAttributedString 问了一个类似的问题，但由于这不可能，我正在寻找一种方法，如果需要，可以通过 HTML、CSS 和 javascript 来实现。

我知道 CSS 有使用首字母的“首字下沉”。示例:https://codepen.io/tutsplus/pen/GZxjEM

但是，我需要对整个单词执行此操作，而不仅仅是第一个字母。在下图中，注意“Strength”是如何最大的，然后是“is not something”和“you have, rather”与“Strength”在同一行。

注意: 我的问题不是如何设置第一个单词的格式——而是如何让 2 行共享第一行。请注意“强度”是如何最大的，然后是“不是某物”和“你有，而是”与“强度”共享同一行。如何让他们共享同一条线路？类似于首字下沉如何让您与第一个字母共享多行。

我需要使用 HTML、CSS 和 JS 实现类似的外观。如果为此不可能实现首字下沉，是否有任何其他方法可以实现此目的？

注意:因为我的文本是可变的，所以我不能使用图像/photoshop 等。

编辑:根据建议，CSS Flexbox 可能能够实现这一点。我需要弄清楚如何将我的话放在方框中:

    <div>
    <div style="float: left; font-size: 4em; background-color:grey;">
        STRENGTH
    </div>
    <div style="float: left; padding-left: 10px; background-color:yellow;">
        <div>
            <span style="font-size: 2em;">is not</span><span style="font-size: 1em;"> something</span>
        </div>
        <div>
            you have, rather
        </div>
    </div>
</div>
<div style="clear: both; font-size: 2em;">
    something that reveals itself
</div>
<div style="font-size: 4em;">
    when you need it.
</div>
<div style="font-size: 1em;">
    #myHASHTAG
</div>

Answer 1

这是一个你可以使用的结构，带有 Flexbox

.inner {
  display: flex;
  align-items: flex-end;
}
.inner > div:nth-child(1) {
  font-size: 60px;
  text-transform: uppercase;
}
.inner2 {
  padding: 0 0 15px 10px;
}
.inner2 div:nth-child(-n+2) {
  display: inline-block;
}
.inner2 > div:nth-child(1) {
  font-size: 20px;
  text-transform: uppercase;
}
.wrapper > div:nth-child(2) {
  font-size: 28px;
  text-transform: uppercase;
}
.wrapper > div:nth-child(3) {
  font-size: 50px;
  text-transform: uppercase;
}

<div class="wrapper">
  <div class="inner">
    <div>Strength</div>
    <div class="inner2">
      <div>is not</div>
      <div>something</div>
      <div>you have, rather</div>
    </div>
  </div>
  <div>something that reveals itself</div>
  <div>when you need it</div>
</div>