指定のないwidthの文字に対しての自動での段落ちについて

Question

下記のようなhtmlがあったとします。

<style>
* {
    margin: 0;
    padding: 0;
}
div{
    width: 10%;
}
dl{
    display: flex;
}
</style>
<div>
    <dl>
        <dt>[商品ID]</dt>
        <dd>shop-00001</dd>
    </dl>
    <dl>
        <dt>[商品名]</dt>
        <dd>りんごCCCCCC赤CcCCCCタイプccccccccccc</dd>
    </dl>
    <dl>
        <dt>[価格]</dt>
        <dd>¥7,000</dd>
    </dl>
    <dl>
        <dt>[サイズ]</dt>
        <dd>フリー</dd>
    </dl>
    <dl>
        <dt>[色]</dt>
        <dd>ブラック</dd>
    </dl>
</div>

こちらを表示させると商品名の項目が長い場合、カラム名の商品名の部分がどんどん詰まっていく形になってしまうかと思います。
理想としては下記のように表示をさせたいです。
例

[商品ID]shop-00001
[商りんごCCCCCC赤
品 CcCCCCタイプ
名]ccccccccccc
[価格]¥7,000
[サイズ]フリー
[色]ブラック

となってしまうかと思います。

理想としては下記のように表示をさせたいです。

[商品ID]shop-00001
[商品名]りんごCCCCCC赤CcCCCCタイプ
       ccccccccccc
[価格]¥7,000
[サイズ]フリー
[色]ブラック

タグの構成は変更せずにcssで解決することはできないでしょうか？
よろしくお願いいたします。

Comments

[m.ts10806]

名称が半角英数は確定なのでしょうか。

[space_sss]

日本語の場合もあります。
そちらがわかりにくいので両方を含んだ文字に変更いたします。
ご指摘ありがとうございます。

Answer 1

以下を追加したら、最低限よさそうに思えます。

dt {
    white-space: nowrap;
}

個人的には手癖で以下も追加したくなるところです。

dd {
    flex: 1 1 0%;
}

---

別件なのですが、HTML構造としては以下が無難と考えます。

<dl>
    <div>
        <dt>[商品ID]</dt>
        <dd>shop-00001</dd>
    </div>
    <div>
        <dt>[商品名]</dt>
        <dd>りんごCCCCCC赤CcCCCCタイプccccccccccc</dd>
    </div>
</dl>

参考:
https://developer.mozilla.org/ja/docs/Web/HTML/Element/dl

Comments

[space_sss]

dl要素は5.2よりそちらの記述が可能となったのですね。
ご指摘ありがとうございました。

Answer 2

下記を追加したらどうでしょうか。

dt {
    flex-shrink: 0;
}