【CSS】画面を小さくした時に要素を小さくさせない方法

css

画面を小さくした時に、要素の大きさはそのままにしたいのに、形が変わってしまう事があります。

この時、要素(バッジ)の大きさはそのままにしたい場合。

<body>
    <div class="wrap">
        <div class="name">name</div>
        <div class="badge">バッジ</div>
    </div>
</body>
        .wrap {
            display: flex;
            justify-content: space-between; /* 要素を均等に配置 */
        }
        .name {
            word-break: break-all; /* 長い文字列がある場合に改行 */
        }
        .badge {
            margin-right: 10px;
            background-color: #007bff; /* バッジの背景色 */
            color: #fff; /* バッジのテキスト色 */
            border-radius: 10px; /* バッジの角丸 */
            padding: 5px 10px; /* バッジの内側の余白 */
            font-size: 12px; /* バッジのテキストのフォントサイズ */
            height: fit-content; /* 要素の高さを、その中に含まれるコンテンツに合わせて自動的に調整する */
            white-space: nowrap; /* テキストを改行しない */
            flex-shrink: 0; /* 縮めたくない要素に指定 */
        }

以下が追加したプロパティ。

name

word-break: break-all; /* 長い文字列がある場合に改行 */

badge

white-space: nowrap; /* テキストを改行しない */
flex-shrink: 0; /* 縮めたくない要素に指定 */
タイトルとURLをコピーしました