【CSS】はみ出した文字を折り返さないではみ出した文字を隠す。| プロサバメモ

WEBプログラミングやサーバ設定などのメモ場

【CSS】はみ出した文字を折り返さないではみ出した文字を隠す。

2022.04.27

div等で、はみ出した文字を折り返さないで、はみ出した文字を隠すCSSは以下2点。

white-space: nowrap;
overflow: hidden;

サンプルHTMLとCSS

<style>
.box {
    width: 120px;
    height: 100px;
    background: green;
    white-space: nowrap;
    overflow: hidden;
}
</style>

<div class="box">
    あいうえおかきくけこさしすせそ
</div>

サンプル実行結果

あいうえおかきくけこさしすせそ

関連記事

TOP