iddyがバージョンアップし、ブログパーツな感じで貼り付けれるようになりました。
参照：http://iddy.jp/blog/log/2007/03/000025.php
このブログだとサイドのカテゴリの下に追加してあるプロフィールがソレです。
iddyは、ボクは開発に直接関わっている訳では無いので、1ユーザーとして使っている訳ですが、今回ブログに貼り付けるに辺り、標準で用意されているデザインでは浮いてしまい「如何にもiddy」みたいな感じがしたので、CSSが自由にいぢれるという事で色々いぢってみました。
その時に、自由入力のプロフィールの内容が多いと、ブログに貼った場合邪魔じゃん！と思い、希望した量でテキストが消えるようにしてみました。
んで、ボクが自分のサイト専用に書いたスタイルは下記。
@charset "utf-8";
/*iddy Style*/
.iddyprofile {
margin:0;
padding:0 0 0 10px;
width:360px;
}
.iddyprofiletitle {
display:none;
}
.iddyprofilebody {
margin:0;
padding:0;
background:none;
}
.iddyprofilephoto {
margin:0;
padding:0;
}
.iddyprofilephoto img {
margin:0 10px 10px 0;
padding:5px;
border:1px solid #eee;
background:#fff;
float:left;
}
.iddyprofilename {
margin:0;
padding:0;
}
.iddyprofilename span {
font-size:80%;
margin-left:5px;
}
.iddyprofiledescription {
float:left;
margin:0 0 15px 0;
padding:0;
width:240px;
height:3em;
overflow:hidden;
}
.iddyprofilemore {
background:url(../img/bg_more.gif) no-repeat right bottom;
padding:8px 20px 10px 0;
text-align:right;
}
.iddyprofilemore a {
background:url(../img/list_more.gif) no-repeat left center;
padding-left:20px;
}
.poweredbyiddy {
clear:both;
margin:0 0 10px;
padding:0;
font-size:80%;
text-align:right;
}
.poweredbyiddy a {
color:#333;
text-decoration:none;
padding:7px 0 7px 23px;
background:url(../img/icon/iddy.gif) no-repeat left center;
}
そのCSSの中で、希望の部分で切ってるのがコレ↓
.iddyprofiledescription {
float:left;
margin:0 0 15px 0;
padding:0;
width:240px;
height:3em;
overflow:hidden;
}
横幅は固定だから、pxできっちり指定して、高さをemで指定。
emで指定する事で、文字サイズが大きくなっても小さくなっても、切れたり出てきたりしないっていうスンポー。
2行だけど、3emで指定してるのはline-heightの計算分です。
overflowは指定した領域からはみ出した場合、どんな風に表示すんの？っていうのを指定してます。
今回はhiddenを指定してるんで隠れます。
因みに値にscrollとか、autoを指定すればスクロールバーが出たりするんです。
コレでiddyのボクのプロフィールは、詳細な内容が読めて、ブログ側では最初の一行だけ表示されるようになりましたとさ。
今回はiddyだったけど、それ以外でもうまく使えば使えるかも？
例えば、隣接セレクタ（+）を使って、2番目以降の内容は見えなくするとか。
p+p {
display:none;
}
まぁIE6じゃ出ちゃうけど。
iddyに関しては、ボクみたいな需要も考慮はされているみたいなんで、無理やりな方法じゃなくてもっとスマートに解決出来るかもです。
今後に期待して待って見ましょうか。
CSSで無理やり文字数を切っているように見せる場合って通常じゃあまり無いので、その辺は考えて使うと良いと思います。