Overflow

表示の overflow に関するプロパティを設定するユーティリティ CSS。

Table of Contents

Basic

  • .is-overflow-hidden ではみ出した部分を消します
  • .is-overflow-ellipsis ではみ出したテキストを 3 点リーダーで省略します
  • .is-overflow-scroll-y で縦スクロールをサポートします
  • .is-overflow-scroll-x で横スクロールをサポートします
  • スクロールタイプには iOS 用の -webkit-overflow-scrolling: touch; が付与されます

オーバーフロウテストオーバーフロウテストオーバーフロウテストオーバーフロウテストオーバーフロウテストオーバーフロウテストオーバーフロウテストオーバーフロウテストオーバーフロウテストオーバーフロウテストオーバーフロウテストオーバーフロウテストオーバーフロウテストオーバーフロウテスト

オーバーフロウテストオーバーフロウテストオーバーフロウテストオーバーフロウテストオーバーフロウテストオーバーフロウテストオーバーフロウテストオーバーフロウテストオーバーフロウテストオーバーフロウテストオーバーフロウテストオーバーフロウテストオーバーフロウテストオーバーフロウテスト

オーバーフロウテストオーバーフロウテストオーバーフロウテストオーバーフロウテストオーバーフロウテストオーバーフロウテストオーバーフロウテストオーバーフロウテストオーバーフロウテストオーバーフロウテストオーバーフロウテストオーバーフロウテストオーバーフロウテストオーバーフロウテスト

オーバーフロウテストオーバーフロウテストオーバーフロウテストオーバーフロウテストオーバーフロウテストオーバーフロウテストオーバーフロウテストオーバーフロウテストオーバーフロウテストオーバーフロウテストオーバーフロウテストオーバーフロウテストオーバーフロウテストオーバーフロウテスト

<div class="box is-p-md">
  <p class="text is-nowrap is-overflow-hidden">オーバーフロウテスト...</p>
</div>
 
<div class="box is-p-md">
  <p class="text is-nowrap is-overflow-ellipsis">オーバーフロウテスト...</p>
</div>
 
<div class="box is-p-md is-overflow-scroll-y">
  <p class="text">オーバーフロウテスト...</p>
</div>
 
<div class="box is-p-md is-overflow-scroll-x">
  <p class="text is-nowrap">オーバーフロウテスト...</p>
</div>

Compatible

推奨のクラス名と同様の効果を互換のあるクラス名で得ることもできます。

推奨のクラス名互換のあるクラス名
.is-overflow-hidden.is-hidden
.is-overflow-ellipsis.is-ellipsis
.is-overflow-scroll-y.is-scroll-y
.is-overflow-scroll-x.is-scroll-x

Variables

上書きできる変数は以下の通りです。

/* None */

Import

PostCSS で読み込む場合の各パスは以下となります。

@import "musubii/src/utilities/overflow/main.css";