kimizuka https://blog.hatena.ne.jp/kimizuka/ みかづきブログ・カスタム https://blog.kimizuka.org/ CSS 親要素にflexを設定する 子要素に下記CSSを当てる overflow: hidden; text-overflow: ellipsis; white-space: nowrap; これで、ウィンドウサイズを縮めた際、子要素は幅を縮めて要素内のテキストを省略できます。 DEMO もしも、子要素の中に幅を縮めたくないものがあるのであれば、flex-shrinkを0に設定します。 DEMO 上記例は、最後の要素以外flex-shrinkを0に設定しているので、最後の要素のみが幅が縮まります。 190 <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fblog.kimizuka.org%2Fentry%2F2024%2F05%2F28%2F234034" title="親要素の幅を縮めた際、子要素も幅を縮めつつ要素内のテキストを省略する 💻 - みかづきブログ・カスタム" 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/k/kimizuka/20240528/20240528233607.gif Hatena Blog https://hatena.blog 2024-05-28 23:40:34 rich https://blog.kimizuka.org/entry/2024/05/28/234034 1.0 100%