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

Question

実現したいこと

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

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

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

該当のソースコード

 section.departmentBox {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	padding: 0;
	max-width: 930px;
}

section.departmentBox div {
	position: relative;
	width:48%;
	margin: min(1%, 5px);
}

section.departmentBox p {
	text-align: center;
	white-space: nowrap;
	position: absolute;
	font-size: clamp(1.1rem, calc(2vw),5rem);
	font-weight: bold;
	padding: 10%;
	width:80%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background:rgba(255,255,255,0.3);
}

section.departmentBox a {
	color: black;
}

<section class="departmentBox">
	<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">
			<p>文字数４</p>
		</a>
	</div>

	<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">
			<p>文字数５■</p>
		</a> </div>

	<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">
			<p>文字数７■■■■</p>
		</a> </div>
	<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">
			<p>文字数５■</p>
		</a> </div>

</section>

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

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

補足

特になし

Comments

[Refrain]

背景の色は`<img>`によるものと思えば良いでしょうか？

[退会済みユーザー]

はい、その通りです。
記載がなく、申し訳ありません。

Answer 1

HTML側の構成を見直した案を提案します。
他にも画像を使わずにborderを使用して外周の枠を表現するのも良いかもです。

<section class="department-list">
  <div class="department-item">
    <a href="" class="department-item-link">
      <img src="test.jpg" class="department-item-image">
      <p class="department-item-text">文字数４</p>
    </a>
  </div>
  <div class="department-item">
    <a href="" class="department-item-link">
      <img src="test.jpg" class="department-item-image">
      <p class="department-item-text">文字数５■</p>
    </a>
  </div>
  <div class="department-item">
    <a href="" class="department-item-link">
      <img src="test.jpg" class="department-item-image">
      <p class="department-item-text">文字数７■■■■</p>
    </a>
  </div>
  <div class="department-item">
    <a href="" class="department-item-link">
      <img src="test.jpg" class="department-item-image">
      <p class="department-item-text">文字数５■</p>
    </a>
  </div>
</section>

.department-list {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  max-width: 930px;
}
.department-item {
  display: flex; align-items: center; justify-content: center;
  width: 48%;
  margin: min(1%, 5px);
}
.department-item-link {
  display: grid; grid-template-areas: 'item';
  color: black;
  width: auto;
}
.department-item-text {
  display: flex; align-items: center; justify-content: center;
  grid-area: item;
  white-space: nowrap;
  font-size: clamp(1.1rem, calc(2vw), 5rem);
  font-weight: bold;
  margin: auto;
  width: 80%; height: 80%;
  background:rgba(255,255,255,0.3);
}
.department-item-image {
  grid-area: item;
}

Comments

[退会済みユーザー]

回答ありがとうございます。
試したところ問題が解決しました。
2時間ほど、確認してからベストアンサーに選ばせていただきます。

[Refrain]

解決して何よりです。

[退会済みユーザー]

無事、本番環境にも移植出来ました。
大変助かりました。

Answer 2

一例ですがsection.departmentBox pについては親要素と同じサイズ(height: 100%; width: 100%;)とし、追加でdisplay: flex; align-items: center; justify-content: center;を振ってセンタリングしてみてはいかがですか？
個人的にpositionなどを使った位置揃えなどはあまり良い思い出が無いもので…

Comments

[退会済みユーザー]

回答ありがとうございます。試してみましたが解決できませんでした。
画像が貼れなくて、イマイチ伝わりにくいですが
画像の上に、文字が重ならずに表示されてしまいます。

緑色の枠　青色の枠

桃色の枠　黄色の枠

文字数７　文字数５■
■■■

※おそらく緑色の枠の文字数４と青色の文字数5■は桃色の枠と黄色の枠の下にあると思われます。