CSSでテキストを中央揃えにして、両脇にはみ出した部分を切り捨てたい

Question

前提・実現したいこと

CSSで中央揃えにしたテキストが画面幅からはみ出る場合、
右側を切り捨てるのではなく両脇を均等に切り捨てたい（非表示にしたい）です。

• text-overflow:clip;
• overflow:hidden;

を指定すると右側のみ切り捨てられてしまいます。

<section class="section" id="about">
  <div class="container mx-auto">
    <div class="row">
      <div class="col-12">
        <a href="#"><h3 class="font-weight-bold">この文章はダミーです。この文章はダミーです。この文章はダミーです。<br>
        この文章はダミーです。この文章はダミーです。この文章はダミーです。<br>
        この文章はダミーです。この文章はダミーです。この文章はダミーです。</h3></a>
        <p class="more text-right">MORE ABOUT</p>
      </div>
    </div>
  </div>
  <span class="about-bg text-center">ABOUT US</span>
</section>

試したコード

h3 {
    font-size: 2.5rem;
    line-height: 2em;
    letter-spacing: 0.25em;
    text-align: justify; /* 両端揃え */
    text-justify: inter-ideograph; /* 両端揃えの種類を定義 */
    margin-bottom: 90px;
}

#about {
    position: relative;
    padding-top: 240px;
    padding-bottom: 240px;
}

#about .container {
    max-width: 985px;
}

#about .more {
    left: 800px;
}

.about-bg {
    z-index: -1;
    position: absolute;
    top: 46%;
    left: 50%;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    margin:0;
    padding:0;
    width: 100%;
    white-space: nowrap;
    text-shadow:1px 1px 0 #d8d8d8,-1px 1px 0 #d8d8d8,1px -1px 0 #d8d8d8,-1px -1px 0 #d8d8d8;
    color: #ffffff;
    font-size: 20rem;
    letter-spacing: 0.06em;
    overflow: hidden;
}

#about a {
    color: #333333;
}

#about a:hover {
    text-decoration: none;
}

補足情報

Bootstrapを使用しています。

Answer 1

position: relative;をしてる親要素にflexで左右中央表示になるように指定したら想定の表示になりました。

#about {
    position: relative;
    padding-top: 240px;
    padding-bottom: 240px;
    display: flex; //追加
    flex-direction: column; //追加
    align-items: center; //追加
    overflow: hidden; //追加
}
 //↓不要なもの消しました
.about-bg {
    z-index: -1;
    position: absolute;
    top: 46%;
    left: 50%;
    transform: translate(-50%,-50%);
    white-space: nowrap;
    text-shadow: 1px 1px 0 #d8d8d8, -1px 1px 0 #d8d8d8, 1px -1px 0 #d8d8d8, -1px -1px 0 #d8d8d8;
    color: #ffffff;
    font-size: 20rem;
    letter-spacing: 0.06em;
}

Answer 2

about-bgのmargin指定で左だけマイナスにしたらいかがでしょうか。
【CSS】ブラウザを狭めた時に、画像の中心を固定したまま両側から非表示にしていく実装

Comments

[19hau]

試してみましたが、固定サイズ（の画像）でないからか使えませんでした。
ご回答いただきありがとうございました！