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>

<b>class="cft": hidden</b>

<br>はみ出た部分は表示されません。

<br>水平方向にパディングボックスに合わせる必要がある場合は、

内容を切り取ります。スクロールバーは表示されません。

</p>

</body>

</html>

<!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>

<!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

関連投稿: