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如何刪除大寫單詞而不是第一個字母？

回答

相關問題