Javascript HTML CSS如何删除大写字母而不仅仅是第一个字母？

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

我知道CSS使用第一个字母有“下降上限”。例如：

然而，我需要做的是整个单词，而不仅仅是第一个字母。 在下图中，请注意“力量”是如何最大的，然后是“不是什么”和“你有，而不是”与“力量”共用一行

注意：我的问题不是如何格式化第一个单词，而是如何让两行共享第一行。请注意，“力量”是最大的，然后“不是什么”和“你有，而是”与“力量”有相同的含义。如何让他们共享同一条线路？类似于使用下拉式大写可以与第一个字母共享多行

我需要用HTML、CSS和JS实现类似的外观。如果无法实现此目的，是否有其他方法可以实现此目的

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

编辑：根据建议，CSS Flexbox可能能够实现这一点。我需要弄清楚如何把我的话放在盒子里：

力量
不是什么
你有
显露出来的东西
当你需要的时候。
#我的标签

试试这个：

<div>
    <div style="float: left; width: 20%;">
        Big Text
    </div>
    <div style="float: left; width: 70%;">
        <div>
            small text first line
        </div>
        <div>
            small tex second line
        </div>
    </div>
</div>
<div style="clear: both;">
    the rest of the text
</div>

大文本
小文本第一行
小特克斯二线
正文的其余部分

试试这个：

<div>
    <div style="float: left; width: 20%;">
        Big Text
    </div>
    <div style="float: left; width: 70%;">
        <div>
            small text first line
        </div>
        <div>
            small tex second line
        </div>
    </div>
</div>
<div style="clear: both;">
    the rest of the text
</div>

大文本
小文本第一行
小特克斯二线
正文的其余部分

我为您编写了一个示例，并尝试将其制作成u共享的照片，希望对您有用：

HTML:

<span class="bigText">Strength </span>
<span class="mediumText">is not 
   <span class="smallText">something </span>
</span>
<span class="subLine">you have, rather</span>

---

我为您写了一个例子，并试图让它像您分享的照片一样，希望它能对您有用：

HTML:

<span class="bigText">Strength </span>
<span class="mediumText">is not 
   <span class="smallText">something </span>
</span>
<span class="subLine">you have, rather</span>

---

这是一个可以与Flexbox一起使用的结构

.inner{
显示器：flex；
对齐项目：柔性端；
}
.inner>div:n子级（1）{
字体大小：60px；
文本转换：大写；
}
.2{
填充：0 0 15px 10px；
}
.inner2分区：第n个子级（-n+2）{
显示：内联块；
}
.inner2>分区：第n个子项（1）{
字体大小：20px；
文本转换：大写；
}
.wrapper>div:n子级（2）{
字号：28px；
文本转换：大写；
}
.wrapper>div:n子级（3）{
字体大小：50px；
文本转换：大写；
}

力量
不是
某物
你有
显露出来的东西
当你需要的时候

这是一个可以与Flexbox一起使用的结构

.inner{
显示器：flex；
对齐项目：柔性端；
}
.inner>div:n子级（1）{
字体大小：60px；
文本转换：大写；
}
.2{
填充：0 0 15px 10px；
}
.inner2分区：第n个子级（-n+2）{
显示：内联块；
}
.inner2>分区：第n个子项（1）{
字体大小：20px；
文本转换：大写；
}
.wrapper>div:n子级（2）{
字号：28px；
文本转换：大写；
}
.wrapper>div:n子级（3）{
字体大小：50px；
文本转换：大写；
}

力量
不是
某物
你有
显露出来的东西
当你需要的时候

您应该使用

文本转换：大写

创建一个css类，并将您想要大写的单词放入

中，该类为大写，没有更复杂的css，目前还不存在，您需要将每个单词包装成

span

，然后控制文本的大小和大写。像这样@O.Paquay我的问题不仅仅是第一个单词，而是如何让两行共享第一行。请注意，“力量”是最大的，然后“不是什么”和“你有，而是”与“力量”有相同的含义。如何让他们共享同一条线路？类似于大写字母使您可以与第一个字母共享多行。@PranoyC您可以使用flexbox来实现这一点。您应该使用

文本转换：大写字母

创建一个css类，并将要大写的单词放入

中，将该类转换为大写字母，而不使用目前不存在的更复杂的css，您需要将每个单词包装成

span

，然后控制文本的大小和大写。像这样@O.Paquay我的问题不仅仅是第一个单词，而是如何让两行共享第一行。请注意，“力量”是最大的，然后“不是什么”和“你有，而是”与“力量”有相同的含义。如何让他们共享同一条线路？类似于使用首字母大写可以共享多行。@PranoyC您可以使用flexbox来实现这一点。很抱歉，这根本不起作用。它只是把单词放得很奇怪：（@PranoyC注意，我加了“clear:tware”。这应该将测试的其余部分放在第一行下面。您应该将百分比从20-70更改为适合您的文本的百分比。谢谢，我稍微修改了您的解决方案，而不是宽度，我使用了字体大小。似乎效果很好。现在唯一的问题是，如何使此中黄色部分的底部与底部对齐灰色的？试着给黄色的一个高度，例如：height:72px；@PranoyC你接受的答案只是我使用Flexbox的代码的复制粘贴，我想我至少应该得到一点支持。顺便说一句，如果你的应用程序应该服务于除你自己以外的任何人，我不会使用Flexbox，因为它在很多浏览器中都不受支持，包括正在下载所有版本的Internet Explorer！！！很抱歉，这根本不起作用。它只是把单词放在了奇怪的位置：（@PranoyC注意，我添加了“clear:both”。这应该将测试的其余部分放在fi下面