CSS overflow-xで横にはみ出た内容を表示する方法

2022年12月28日

環境
Windows 10 Home 64bit
Google Chrome　107.0.5304.122（Official Build）（64 ビット）

構文
overflow-x: hidden;
要素ボックスからはみ出た部分は表示されません。
overflow-xプロパティは、横幅が指定された要素でその範囲内に内容が入りきらない場合に、
横にはみ出た部分の表示方法を指定します。

使用例

<!DOCTYPE html>
<html>
<head>
<style>
 p.cft { width:350px; 
         height:80px; 
         background-color:#5cbce3; 
         overflow-x: hidden;}
</style>
</head>
<body>

<p class="cft">
   <b>class="cft": hidden</b>
   <br>はみ出た部分は表示されません。
   <br>水平方向にパディングボックスに合わせる必要がある場合は、
     内容を切り取ります。スクロールバーは表示されません。
</p>

</body>
</html>

結果
要素ボックス「cft」にはみ出た部分は表示されません。

CSS

Posted by arkgame

関連記事: