html - テキストが 2 行目に折り返されるのはなぜですか?

Question

テキストを適切に配置しようとしています。ただし、キャプションや説明が長い場合は展開されません。以下は私が持っているものです..

スクリーンショット:

「The Forum」でも構いませんが、「Subscribe Today!」「The Forum」のように 1 行にとどまることはありません。長いテキストがある場合に発生します。また、説明についても同様です。

HTML:

<div class="hotcampaign-container">
    <a href="' . $item['url'] . '">
        <div id="campaigns_image">
            <img src="' . $item['image_url'] . '" align="left" alt="' . $item['caption'] . '" />
    </a>    </div>
    <div id="campaigns_caption">' . $item['caption'] . '</div>
    <div id="campaigns_desc">' . $item['desc'] . '</div>
    <div id="campaigns_link">
        <a href="' . $item['url'] . '">
            <div align="right">More Info &raquo;</div>
        </a>
        </p>
    </div>
<br />
</div>

Div ID の CSS:

#campaigns_image {
    padding: 0px 10px 10px;
}
#campaigns_caption {
    padding: 0px 177px 0px;
    font-weight: bold;
}
#campaigns_desc {
    padding: 0px 177px 0px;
}
#campaigns_link {
    padding: 0px 10px 0px;
}

Answer 1

試す

#campaigns_caption{
    padding: 0px 177px 0px;
    font-weight: bold;
    width:auto;
    min-width:300px;//some px according to te scenario
}

Answer 2

「今すぐ購読」テキストをレンダリングするwhitespace:nowrap;またはclassのidを追加します。<div>

Answer 3

#campgaigns_captiondivの css のパディングを削除してみてください:

#campaigns_caption {
    padding: 0px 0px 0px;
    font-weight: bold;
}

Answer 4

空白を試してみてください : nowrap

#campaigns_caption {
    padding: 0px 177px 0px;
    font-weight: bold;
    white-space: nowrap;
}