Felly00505 https://blog.hatena.ne.jp/Felly00505/ arms inc. Engineers' Blog https://tech.arms-soft.co.jp/ フロントエンド CSS こんにちは、ユアサです。 以前、長文テキスト対策についての記事を書いたことがありました。その記事では紹介し忘れていましたが（というより最近知ったのですが）、テキストが改行・分割された時、テキストの改行位置にある文字のパディングや装飾を補間するプロパティbox-decoration-breakについて、今回の記事で具体的な使い方を交えて紹介したいと思います。 長文テキスト改行時に起こる現象について 以前の記事で紹介した長文テキスト対策について、親要素をはみ出さないように改行させる方法がありました。対策ができたのはいいですが、まだ解決できていない問題があります。「背景のついたテキスト」です。 テキ… 190 <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Ftech.arms-soft.co.jp%2Fentry%2F2023%2F04%2F19%2F090000" title="インライン要素の長文テキストの表示は大丈夫？box-decoration-breakを使って整えよう！ - arms inc. Engineers&#39; Blog" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe> https://cdn-ak.f.st-hatena.com/images/fotolife/F/Felly00505/20230913/20230913181912.jpg Hatena Blog https://hatena.blog 2023-04-19 09:00:00 rich https://tech.arms-soft.co.jp/entry/2023/04/19/090000 1.0 100%