【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>サンプル実行結果
あいうえおかきくけこさしすせそ