質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

3411閲覧

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

19hau

総合スコア0

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/04/30 15:01

前提・実現したいこと

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

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

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

イメージ説明

HTML

1<section class="section" id="about"> 2 <div class="container mx-auto"> 3 <div class="row"> 4 <div class="col-12"> 5 <a href="#"><h3 class="font-weight-bold">この文章はダミーです。この文章はダミーです。この文章はダミーです。<br> 6 この文章はダミーです。この文章はダミーです。この文章はダミーです。<br> 7 この文章はダミーです。この文章はダミーです。この文章はダミーです。</h3></a> 8 <p class="more text-right">MORE ABOUT</p> 9 </div> 10 </div> 11 </div> 12 <span class="about-bg text-center">ABOUT US</span> 13</section>

試したコード

CSS

1h3 { 2 font-size: 2.5rem; 3 line-height: 2em; 4 letter-spacing: 0.25em; 5 text-align: justify; /* 両端揃え */ 6 text-justify: inter-ideograph; /* 両端揃えの種類を定義 */ 7 margin-bottom: 90px; 8} 9 10#about { 11 position: relative; 12 padding-top: 240px; 13 padding-bottom: 240px; 14} 15 16#about .container { 17 max-width: 985px; 18} 19 20#about .more { 21 left: 800px; 22} 23 24.about-bg { 25 z-index: -1; 26 position: absolute; 27 top: 46%; 28 left: 50%; 29 -ms-transform: translate(-50%,-50%); 30 -webkit-transform: translate(-50%,-50%); 31 transform: translate(-50%,-50%); 32 margin:0; 33 padding:0; 34 width: 100%; 35 white-space: nowrap; 36 text-shadow:1px 1px 0 #d8d8d8,-1px 1px 0 #d8d8d8,1px -1px 0 #d8d8d8,-1px -1px 0 #d8d8d8; 37 color: #ffffff; 38 font-size: 20rem; 39 letter-spacing: 0.06em; 40 overflow: hidden; 41} 42 43#about a { 44 color: #333333; 45} 46 47#about a:hover { 48 text-decoration: none; 49}

補足情報

Bootstrapを使用しています。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

自己解決

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

CSS

1#about { 2 position: relative; 3 padding-top: 240px; 4 padding-bottom: 240px; 5 display: flex; //追加 6 flex-direction: column; //追加 7 align-items: center; //追加 8 overflow: hidden; //追加 9} 10 //↓不要なもの消しました 11.about-bg { 12 z-index: -1; 13 position: absolute; 14 top: 46%; 15 left: 50%; 16 transform: translate(-50%,-50%); 17 white-space: nowrap; 18 text-shadow: 1px 1px 0 #d8d8d8, -1px 1px 0 #d8d8d8, 1px -1px 0 #d8d8d8, -1px -1px 0 #d8d8d8; 19 color: #ffffff; 20 font-size: 20rem; 21 letter-spacing: 0.06em; 22}

投稿2020/05/03 03:19

編集2020/05/03 03:27
19hau

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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

投稿2020/05/01 02:47

na-01

総合スコア99

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

19hau

2020/05/03 03:24

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問