スポンサード リンク
clipプロパティ
要素を一部を切り抜いて表示することができます使い方(書式)CSS2.1の仕様
セレクタ { clip: rect(上,右,下,左); }
使い方(書式)CSS2の古い仕様、IE7以下に適用するには半角空白で区切ってください(IE7のシェアがまだある場合はこっちで)他のブラウザもこっちでも表示できます
セレクタ { clip: rect(上 右 下 左); }
clipプロパティ
対応ブラウザ | |
適用できる要素 | 全てのhtml要素(positionプロパティでabsoluteを指定した要素) |
子要素へのスタイルの継承 | しない |
プロパティの値 | 説明 |
rect(上,右,下,左) | 要素を切り抜く表示位置を指定 |
auto | 切り抜きなし。初期値 |
実際の指定方法
.hoge { width: 300px; height: 100px; bordor:solid 1px; }
.hoge2 { clip: rect(20px 80px 80px 30px); /* 切り抜く範囲を指定 */ position: absolute; /* ページの内で自由に配置できるようにする */ width: 300px; height: 100px; bordor:solid 1px; }
html部分
<div class="hoge2"><br> 今日はねとってもいいお天気なの<br> 絶好のさんぽ日和なのよ<br> うち、まじよ</div>
切り抜く前のテキスト
切り抜いた部分 clip: rect(20px 80px 80px 30px);