これまでサーバ側のperlで「...」な省略を行なってました
この手のviewの処理は、client側のjavascriptで行うべきかもしれませんが、良い方法が思い浮かばなかったので、表示領域を文字数超える場合、「...」等で溢れた部分を省略する場合、次のようなperl scriptでserver sideで処理していました。
sub str_head { my ($self,$org_str,$limit_len) = @_; return undef if(not defined($org_str)); my $len = length($org_str); return $org_str if ($len <= $limit_len); return substr($org_str,0,$limit_len) .'...'; }
また、正しく表示する場合、全角=2文字,半角=1文字で文字列長を算出する必要がありますが、これに関しては、次のエントリで記載しています。
text-overflow: ellipsis; は、ieやchrome、firefoxで使えます
スタイルシートの「text-overflow: ellipsis;」の存在は知っていましたが、最近では、ieやchrome、firefoxの主要ブラウザで利用できるようです。
※ただし、th要素やtd要素には適用できないようです。
html + css
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style> div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; width: 70px; border: 1px solid #000000; } </style> </head> <body> <div>ABCDEFGHI</div> <div>ＡＢＣＤＥＦＧＨＩ</div> <div>ＡBＣDＥFＧHＩ</div> <div>IIIIIIIIIIIIIIIIIIIIIIIIIIII</div> </body> </html>
