JAMADAM.COM

以前にこんなエントリ書いたり、こんなjQueryプラグイン作ったりしたけど、それってCSSだけでできるんじゃん！

http://www5e.biglobe.ne.jp/~access_r/hp/css/css_text_019.html

text-overflow
テキストがオーバーフロー（領域を超えてしまう事）する際にオーバーフローしたテキストを「...」で省略することが出来ます。

しかも属性名と値などのキーワードも思い描いたまんまじゃん。ただし、省略記号を有効にする指定はtext-overflow: ellipsis;だ。以前にもちゃんとググったつもりだったけど、英語の情報無視してたかなあ。

ただしFirefoxは未対応なので依然としてJavascriptでのハックは必要。また、text-overflowはIEのみの対応のようで、SafariやOperaはそれぞれの拡張属性を併記して対応できる。

a.width-limited {
    display:block;
    overflow: hidden;
    white-space:nowrap;
    -webkit-text-overflow: ellipsis; // Safari
    -o-text-overflow: ellipsis; // Opera
    text-overflow: ellipsis; // IE
}

このページ、他のブログを十分に研究せずに作ったせいか、なんだか、インターフェースが洗練されてなさすぎでした。右のコメントリストの書式を変更しました。

ウェブページを設計するときって、必ずテキストの幅(折り返し)で悩みます。HTMLは優秀な言語ですが、CSSとその実装にまだまだ不満が絶えません。本当は、レイアウトはすべて相対値指定のリキッドデザインをこよなく愛しているのですが、右のナビゲータ部の横幅は固定値で妥協しました。その結果、長いタイトルははみ出すけど、仕方が無い。小手先で指定文字数以下を省略するようにしてみました。こういう省略表記などもCSSでやってくれてもいい気がします。text-overflow:clipみたいな。思い付きですけど。

省略にはテンプレート関数、名づけて「clip_str」を使用。

&clip_str(str => $summary, start => 0, count => 10)

僕のテンプレートシステムでは上記のようなPerl関数を特殊な引用符で括って、直接記述します。表記方法はPerl準拠。手抜きではない。僕以外の人間がテンプレート設計する場合でもPerl知ってれば取り合えず問題ないという。そんなありえない想定で、パーソナルなシステムを作るのは、幼少時代にガンダム戦わせる一人遊びをしていた名残ですね。ちなみに、最近、perlの関数を書くときは必ず引数名つきの仕様にすることにしています。命名が面倒なのを差し引いても、保守が圧倒的に楽。今回初めてこういう書き方を知りました。