CSSで要素の右側の文字列を同じ場所で改行させたい

Question

前提・実現したいこと

WordPressの固定ページに自分の投稿した記事を表示させるとき
アイキャッチ画像の右側にタイトルを設置したい。

ウィンドウサイズが小さくなったりタイトルが長くなった場合にアイキャッチ画像の右側でタイトルを改行させたい。

発生している問題・エラーメッセージ

アイキャッチ画像の右側に表示されているタイトルが
タイトルのサイズが長いときやウィンドウサイズが小さくなったとき
アイキャッチ画像の下に移動してしまう。

タイトルを改行させることで下に移動するのを回避させたい。

該当のソースコード

<div class="box">
            <div class="box-img">
                <?php if (has_post_thumbnail()) : ?>
                    <?php
                    the_post_thumbnail(array(150, 200)); ?>

                <?php else : ?>
                    <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/default.jpg">
                <?php endif; ?>
            </div>
            <div class="box-text">
                <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
            </div>
</div>

.box-img,
.box-text{
  display: inline-block;
  vertical-align: top;
}

Answer 1

inline-block にして横並びにしてますが、inline-block は幅を設定しないと中身の幅と同じになります。
下記のような感じで幅を適切に設定すればいいでしょう。

.box-img,
.box-text{
  display: inline-block;
  vertical-align: top;
}

.box-text{
  font-size: 40px;
  width: calc(100% - 310px) /* 画像の幅が300pxの場合 */
}

<div class="box">
    <div class="box-img">
        <img src="https://placehold.jp/300x300.png">
    </div>
    <div class="box-text">
        <a href="">title title title title title</a>
    </div>
</div>

---

ちなみに、
CSS FlexBoxで横並びにすればCSSが自動で幅を適切に拡縮してくれますので下記のように簡単になります。

.box2 {
  display: flex;
}
.box-text2 {
  font-size: 40px;
}

<div class="box2">
    <div class="box-img2">
        <img src="https://placehold.jp/300x300.png">
    </div>
    <div class="box-text2">
        <a href="">title title title title title</a>
    </div>
</div>

CodePenサンプル

Comments

[skyth]

ご回答ありがとうございます。
flexを使用すると簡単になりますね！

重ねて質問させていただきたいのですが、
flexを使用した際に画像の幅も同時に変化してしまうのですが
画像の幅を固定する方法はありますでしょうか。

.box-imgを固定したままtextの部分だけを可変させたいです。

[hatena19]

下記でどうぞ。

.box-img {
flex-grow: 0;
flex-shrink: 0;
}

[skyth]

解決することができました！
ありがとうございました！