前提・実現したいこと
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を使用しています。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。