v7.1.0

Overflow

Table of Contents

Detail

共通モディファイアで overflow 関連のプロパティを操作するユーティリティ CSS。

Basic

.is-overflow-(value) の形式で使います。

Overflow

山路を登りながら、こう考えた。智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。住みにくさが高じると、安い所へ引き越したくなる。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。

<p class="text is-overflow-hidden" style="max-height: 4.25em; padding: 1em 0;">山路を登りながら、こう考えた。智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。住みにくさが高じると、安い所へ引き越したくなる。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。</p>
ModifierDescription
.is-overflow-hidden収まらない部分があった場合、非表示にする。
.is-overflow-scroll-x収まらない部分があった場合に横スクロールする。
.is-overflow-scroll-y収まらない部分があった場合に縦スクロールする。
.is-overflow-ellipsis収まらない文字があった場合に三点リーダーで省略する。

Important

Option の $option-important-overflow を true にすると、全プロパティに !important を付与できます。

Variables

Name
Default Value
  • Name
    $modifier-overflow-hidden
    Default Value
    .is-overflow-hidden
  • Name
    $modifier-overflow-scroll-x
    Default Value
    .is-overflow-scroll-x
  • Name
    $modifier-overflow-scroll-y
    Default Value
    .is-overflow-scroll-y
  • Name
    $modifier-overflow-ellipsis
    Default Value
    .is-overflow-ellipsis
  • Name
    $overflow-important
    Default Value
    if( $option-important-overflow == true, !important, null )

Mixins

  • musubii-style-overflow-hidden()
  • musubii-style-overflow-scroll-x()
  • musubii-style-overflow-scroll-y()
  • musubii-style-overflow-ellipsis()

Sources