end0tknr's kipple - 新web写経開発

http://d.hatena.ne.jp/end0tknr/ から移転します

はみ出した文字を…(三点リーダ)等で省略するなら cssの text-overflow: ellipsis;

これまでサーバ側の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文字で文字列長を算出する必要がありますが、これに関しては、次のエントリで記載しています。

perlで全角=2文字,半角=1文字で文字列長を算出する - end0tknrのkipple - web写経開発

text-overflow: ellipsis; は、iechromefirefoxで使えます

スタイルシートの「text-overflow: ellipsis;」の存在は知っていましたが、最近では、iechromefirefoxの主要ブラウザで利用できるようです。

※ただし、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>ABCDEFGHI</div>
<div>ABCDEFGHI</div>
<div>IIIIIIIIIIIIIIIIIIIIIIIIIIII</div>
</body>
</html>
左から、firefox11 , chrome 17 , ie9