不明なサイズのタイトルの背景色を設定する

Question

ユーザーが入力したpost.titleというhtmlテンプレートがあります。

<section id="home" class=""> 
    <h1 class="main-heading"><%= @post.title %></h1> 
    </section> 

ユーザーのタイトルの長さは不明です。それは（例えば）5文字、20文字または100文字であってもよい。

私は読者がタイトルを区別しやすくするために、テキストの後ろに低不透明黒色の背景を入れたい：

.main-heading { 
    /*TEXT ON MAIN PIC*/ 
    height: 20%; 
    width: auto; 
    padding: 20px; 
    font-family: 'Open sans', sans-serif; 
    font-size: 95px; 
    font-weight: 300; 
    text-align: center; 
    letter-spacing: 9px; 
    text-transform: uppercase; 
    text-shadow: 2px 2px 2px rgba(100,100,100,0.6); 
    background-color: rgba(10,10,10,0.2); 
} 

私は予測可能なタイトルの高さと幅を調整することができますが、方法がわかりませんサイズが変わるタイトルにこれらの値を適用します。

Answer 1

私が推奨するのは、スタイルを設定できるラッパーを追加することです。

.main-heading { 
 
    /*TEXT ON MAIN PIC*/ 
 
    height: 20%; 
 
    width: auto; 
 
    padding: 20px; 
 
    font-family: 'Open sans', sans-serif; 
 
    font-size: 95px; 
 
    font-weight: 300; 
 
    text-align: center; 
 
    letter-spacing: 9px; 
 
    text-transform: uppercase; 
 
    text-shadow: 2px 2px 2px rgba(100,100,100,0.6); 
 
} 
 

 
.background { 
 
    background-color: rgba(10,10,10,0.2); 
 
}

<section id="home" class=""> 
 
    <h1 class="main-heading"> 
 
     <span class="background"> 
 
      foobar 
 
     </span> 
 
    </h1> 
 
</section>

私は、これはあなたが探しているものだと思うし、それは同様に非常に簡単です。当然、display: inline-blockを設定して自由にパディング/余白を追加することができます。

Answer 2

ラップ（h1の内側）spanにTE <%= @post.title %>は、そのスパンにあなたのスタイルを適用しても、それにdisplay: inline-blockを追加します。

.main-heading>span { 
 
    display: inline-block; 
 
    height: 20%; 
 
    width: auto; 
 
    padding: 20px; 
 
    font-family: 'Open sans', sans-serif; 
 
    font-size: 32px; 
 
    font-weight: 300; 
 
    text-align: center; 
 
    letter-spacing: 9px; 
 
    text-transform: uppercase; 
 
    text-shadow: 2px 2px 2px rgba(100, 100, 100, 0.6); 
 
    background-color: rgba(10, 10, 10, 0.2); 
 
}

<section id="home" class=""> 
 
    <h1 class="main-heading"><span><%= @post.title %></span></h1> 
 
</section>