長い文字を画像の上に表示させる方法をご教授ください。

実現したいこと

下記画像の「文字数７■■■」が、改行させずに、ピンク色の画像の範囲に納まるように表示させる方法を教えてください。

発生している問題・分からないこと

現状は、下記のように、右側にはみ出しています。

該当のソースコード

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>文字数４</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>文字数５■</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>文字数７■■■■</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>文字数５■</p> 48 </a> </div> 49 50</section>

試したこと・調べたこと

上記の詳細・結果

ネットなどで調べて、文字を画像の上に重ねる、文字を中央に表示させるまではできました。
しかし、長い文字だと、画像を突き抜けてしまいます。

補足

特になし