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

我对iOS NSAttributedString提出了一个类似的问题，但由于这不可能，因此我正在寻找一种通过HTML，CSS和JavaScript实现此功能的方法（如果需要的话）。HTML CSS如何删除大写单词而不是第一个字母？

我知道CSS有使用首字母的“drop cap”。例如：https://codepen.io/tutsplus/pen/GZxjEM

但是，我需要为整个单词而不只是第一个字母。在下面的图片中，注意“力量”是最大的，然后“不是什么”和“你有，而是”与“力量”共享同一条线。

注意：我的问题不是如何格式化第一个单词 - 这是如何有2线共享第一行。注意“力量”是最大的，然后“不是某种东西”和“你有”，而是“与”力量“分享相同的路线。如何让他们分享同一条线？类似于drop-caps如何让你有多行与第一个字母共享。

我需要用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>

来源

2017-06-01 Pranoy C

您应该创建一个CSS类'文本转换：大写'，并把你想要的大写字放入''，类别为大写 –

如果没有更复杂的CSS，目前不存在更复杂的CSS，则需要将每个单词封装在“span”中，以控制文本的大小和大小。 – evolutionxbox

喜欢这个https://codepen.io/OliviaPaquay/pen/dRbbjz –

这里有一个结构，你可以使用，以实现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>

来源

2017-06-01 09:06:38 LGSon

这是完美的，谢谢！一个小小的挑逗问题：你知道是否有办法调整“力量”和“你有，而不是”的底部？目前，“你有，而不是”略低于“实力”。我知道我的原始图像也有这个问题，但有没有办法解决它？ –

@PranoyC我已经添加了规则'.inner2 {padding：0 0 10px 5px; ''做到这一点。用'10px'值进行调整，从底部进行调整，从左侧调整5px' – LGSon

好吧，我玩了一下，并将其设置为15px，从底部看起来不错。谢谢，答案已接受！ –

试试这个：

<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>

来源

2017-06-01 08:33:26 Alon

对不起，这根本不起作用。它只是把这些单词放在了奇怪的地方:( –

@PranoyC请注意，我添加了“clear：both”，这应该将剩下的测试放在第一行下面，你应该将20-70的百分比改成适合的值 – Alon

谢谢你，我修改了一下你的解决方案 - 而不是宽度，我使用了font-size。似乎工作的很好，现在唯一的问题是如何让黄色部分的底部与其对齐灰色的底部？https://jsfiddle.net/ff267gy2/2/ –

我为你写的例子，尽量做到像照片ü分享，希望能对您有用：

HTML：

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

个

CSS：

.bigText{ 
    font-size:80px; 
    text-transform: uppercase;// use capitalize for make first word uppercase 
} 
.mediumText{ 
    font-size:30px; 
    text-transform: uppercase; 
    position: absolute; 
    top:35px 
} 
.smallText{ 
    font-size:20px;  
} 

.subLine{ 
     font-size:20px; 
}

https://jsfiddle.net/emilvr/6o2fpf9t/1/

来源

2017-06-01 08:51:37

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

回答

相关问题