レイアウトの都合上とか、リンク先のタイトルが長い場合に表示を切り詰めたいときがあります。そういうときは、出力する前に文字数で切り詰めてから表示させたりするのが常道ですが、文字の幅はフォントによっても異なるし、なかなか思うようにいきません。
そこで、切り詰めたいテキストを自動改行させずに表示させ、上位の要素の幅に収まるまで徐々に切り詰めていくという方法で実現してみました。場合によっては、offsetLeftを考慮した方がうまくいくこともありますが、ここでは考慮しないでやっています。
【サンプルその１】
function chop(node) {
var parent = node.parentNode;
var max = parent.offsetWidth;
var display = node.style.display;
node.style.display = 'inline';
node.style.whiteSpace = 'nowrap';
if (node.offsetWidth > max) {
node.innerHTML += '…';
while (node.offsetWidth > max) {
var t = node.innerHTML;
node.innerHTML = t.substring(0, t.length - 2) + '…';
}
}
node.style.display = display;
}
chop($('mytext'));
【サンプルその１の実行】 → クリックすると、下の矩形領域内のテキストが領域に収まる長さに切り詰められます。
寿限無、寿限無 五劫の擦り切れ 海砂利水魚の 水行末 雲来末 風来末 食う寝る処に住む処 やぶら小路の藪柑子 パイポパイポ パイポのシューリンガン シューリンガンのグーリンダイ グーリンダイのポンポコピーのポンポコナーの 長久命の長助
【サンプルその２】
function chop(node) {
var parent = node.parentNode;
var max = parent.offsetWidth;
var display = node.style.display;
node.style.display = 'inline';
node.style.whiteSpace = 'nowrap';
if (node.offsetWidth > max) {
node.innerHTML += '…';
while (node.offsetWidth > max) {
var t = node.innerHTML;
node.innerHTML = t.substring(0, t.length - 2) + '…';
}
}
node.style.display = display;
}
var nodeList = document.getElementsByTagName('li');
for (var i = 0; i < nodeList.length; i++) {
chop(nodeList.item(i));
}
【サンプルその２の実行】 → クリックすると、下の矩形領域内のリストが領域に収まる長さに切り詰められます。
- 春はあけぼの。
- やうやう白くなりゆく山際、少しあかりて、紫だちたる雲の細くたなびきたる。
- 夏は夜。
- 月の頃はさらなり。
- 闇もなほ、蛍のおほく飛びちがひたる。
- また、ただ一つ二つなど、ほのかにうち光りて行くもをかし。
- 雨など降るもをかし。
