divボックスの中心にオーバーフローテキストを揃える方法は？

Question

ここに私の質問です：

私の見出しの単語はdivボックスをあふれています。その理由は、wordのサイズがdivの幅よりも広く、私は "nowrap"ルールを設定しているからです。それはこのように示した：

私はそれは、右のオーバーフローの一部を左にFオーバーフローの一部になるように、言葉「判カメラ」は、DIVボックスの中心軸に整列します。どうやってやるの？ここに私の簡単なCSSのコードは次のとおりです。

.content { 
    text-align: center; 
} 

h1(FORMAT CAMERA) { 
    color: white; 
    font-size: 50px; 
    font-family: "Rubik", sans-serif; 
    line-height: 1.4; 
    white-space: nowrap; 
} 

Answer 1

ただ.contentにdisplay:flexとjustify-content: centerを追加します。
これは少しハックですが、それが動作flex box

.content { 
 
    text-align: center; 
 
    border: solid 1px #333; 
 
    width: 300px; 
 
    margin: 0 auto; 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 

 
h1 { 
 
    color: black; 
 
    font-size: 50px; 
 
    font-family: "Rubik", sans-serif; 
 
    line-height: 1.4; 
 
    white-space: nowrap; 
 
}

<div class="content"> 
 
    <h1>FORMAT CAMERA</h1> 
 
</div>

Answer 2

驚異についての詳細を参照してください。マージンをleftとmargin-rightをh1タグに100％追加することで実現します。これは、基本的には、ウィンドウのサイズに対してどちらかの側で等しい量の要素を「引っ張り」、内容divから溢れ出すように強制します。

水平スクロールが表示されないように、の.outerspaceラッパーを追加しました。

.outerspace { 
 
    overflow:hidden; 
 
} 
 
.content { 
 
    text-align: center; 
 
    width:400px; 
 
    margin:0 auto; 
 
    background: pink; 
 
} 
 
h1 { 
 
    color: red; 
 
    font-size: 55px; 
 
    font-family: "Rubik", sans-serif; 
 
    white-space: nowrap; 
 
    margin-left: -100%; 
 
    margin-right:-100%; 
 
}

<div class="outerspace"> 
 
    <div class="content"> 
 
    <p>Lorem ipsum dolor</p> 
 
    <h1>FORMAT CAMERA</h1> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
    </div> 
 
</div>