「CSS」overflow: hiddenで超える領域を表示しない

2014年3月30日2021年11月1日

書式
overflow: hidden;
表示領域を超えた分は表示しません。日本語は改行されます。
使用例

<style>

.cftA,.cftB {

border: 1px solid #000;

width: 160px;

height: 50px;

background: SkyBlue;

/*表示領域を超えた分は表示しません日本語は改行されます*/

overflow: hidden;

}

</style>

<p class="cftA">test12345678test123456789test111(overflow)</p>

<p class="cftB">hidden内容は、必要に応じてパディングボックスに合わせて切り取られます。スクロールバーは表示されず</p>

<style>
  .cftA,.cftB {
    border: 1px solid #000;
    width: 160px;
    height: 50px;
    background: SkyBlue;
    /*表示領域を超えた分は表示しません 日本語は改行されます*/
    overflow: hidden;
  }
</style>
<p class="cftA">test12345678test123456789test111(overflow)</p>
<p class="cftB">hidden内容は、必要に応じてパディングボックスに合わせて切り取られます。スクロールバーは表示されず</p>

CSS

Posted by arkgame

関連投稿: