実現したいこと
下記画像の「文字数7■■■」が、改行させずに、ピンク色の画像の範囲に納まるように表示させる方法を教えてください。
発生している問題・分からないこと
該当のソースコード
cssとhtmlタグ
1 section.departmentBox { 2 display: flex; 3 flex-wrap: wrap; 4 list-style: none; 5 padding: 0; 6 max-width: 930px; 7} 8 9section.departmentBox div { 10 position: relative; 11 width:48%; 12 margin: min(1%, 5px); 13} 14 15section.departmentBox p { 16 text-align: center; 17 white-space: nowrap; 18 position: absolute; 19 font-size: clamp(1.1rem, calc(2vw),5rem); 20 font-weight: bold; 21 padding: 10%; 22 width:80%; 23 top: 50%; 24 left: 50%; 25 transform: translate(-50%, -50%); 26 background:rgba(255,255,255,0.3); 27} 28 29section.departmentBox a { 30 color: black; 31} 32 33<section class="departmentBox"> 34 <div> <a href="<?php echo esc_url(home_url('/')); ?>test/"> <img src="<?php echo esc_url(home_url('/')); ?>wp-content/uploads/2024/03/練習1.jpg"> 35 <p>文字数4</p> 36 </a> 37 </div> 38 39 <div> <a href="<?php echo esc_url(home_url('/')); ?>test/"> <img src="<?php echo esc_url(home_url('/')); ?>wp-content/uploads/2024/03/練習2.jpg"> 40 <p>文字数5■</p> 41 </a> </div> 42 43 <div> <a href="<?php echo esc_url(home_url('/')); ?>test/"> <img src="<?php echo esc_url(home_url('/')); ?>wp-content/uploads/2024/03/練習3.jpg"> 44 <p>文字数7■■■■</p> 45 </a> </div> 46 <div> <a href="<?php echo esc_url(home_url('/')); ?>test/"> <img src="<?php echo esc_url(home_url('/')); ?>wp-content/uploads/2024/03/練習4.jpg"> 47 <p>文字数5■</p> 48 </a> </div> 49 50</section>
試したこと・調べたこと
- teratailやGoogle等で検索した
- ソースコードを自分なりに変更した
- 知人に聞いた
- その他
上記の詳細・結果
ネットなどで調べて、文字を画像の上に重ねる、文字を中央に表示させるまではできました。
しかし、長い文字だと、画像を突き抜けてしまいます。
補足
特になし
背景の色は`<img>`によるものと思えば良いでしょうか?
はい、その通りです。
記載がなく、申し訳ありません。
回答2件
あなたの回答
tips
プレビュー