https://www.nt-jp.com/contents/wp-content/themes/nt-jp/js/trim.js

1/**
2 * 文章を指定した行数で省略する。
3 * IEでのみ処理する。それ以外はcssで処理している。
4 */
5
6if (window.navigator.userAgent.indexOf('Trident') != -1 || window.navigator.userAgent.indexOf('msie') != -1) {
7    // 省略対象のclassを指定
8    var omit = document.getElementsByClassName('description');
9
10    window.onload = function() {
11        // 元の文章をdata-origintextに退避
12        omit_init();
13        // 文章を省略する処理。引数に行数を指定。
14        omit_sentence(2);
15    };
16
17    /**
18     * 文字省略の初期設定
19     */
20    function omit_init() {
21        for (var i = 0; i < omit.length; i++) {
22            if(omit[i].dataset.origintext === undefined) {
23                var sentence = omit[i].textContent;
24                omit[i].dataset.origintext = sentence;
25            }
26        }
27    }
28
29    /**
30     * 文字省略の実行
31     * @param {number} line - 省略する行数
32     */
33    function omit_sentence(line) {
34        // 対象の文章を1文字ずつspanで区切る
35        for (var i = 0; i < omit.length; i++) {
36            omit[i].innerHTML = divide_sentence(omit[i].dataset.origintext);
37        }
38
39        // 区切った文字の行数(座標)を調べる
40        for (var i = 0; i < omit.length; i++) {
41            var s = omit[i].getElementsByTagName('span');
42            // 省略する位置を調べる
43            var omitIndex = check_character_row_count(s, line);
44
45            // 省略した文章を反映
46            var sentence = omit[i].dataset.origintext;
47            if(omitIndex !== undefined) {
48                sentence = sentence.slice(0, omitIndex) + '…';
49            }
50            omit[i].textContent = sentence;
51        }
52    }
53
54    /**
55     * 文章を1文字ずつspanで括って返す
56     * @param {string} text - 分割する文字列
57     */
58    function divide_sentence(text) {
59        var textArr = text.split('');
60        var divideText = '';
61        for (var i = 0; i < textArr.length; i++) {
62            divideText += '<span>' + textArr[i] + '</span>';
63        }
64        divideText += '<span>' + '…' + '</span>';
65        return divideText;
66    }
67
68    /**
69     * 省略する位置を調べて返す
70     * @param {object} text - spanで区切った文字群
71     * @param {number} line - 省略する行数
72     */
73    function check_character_row_count(text, line) {
74        var lineCount = 0;
75        var beforeTop = text[0].getBoundingClientRect().top - 1;
76        var omitIndex = undefined;
77        for (var i = 0; i < text.length - 1; i++) { // 文章の最後に確認用の省略文字が入っているので、最後の文字はチェックから除外
78            var currentTop = text[i].getBoundingClientRect().top;
79            // 今回の文字の座標が前回の文字の座標より先に進んでいる時
80            if(currentTop > beforeTop) {
81                beforeTop = currentTop;
82                lineCount++;
83            }
84            // 調べている文字が省略行数を過ぎた時
85            if(lineCount > line) {
86                // 省略の記号を入れるため、文字の幅から切り取り位置の調整
87                var ellipsisWidth = text[text.length - 1].getBoundingClientRect().width + 1;
88                var c = 0;
89                var w = 0;
90                do {
91                    c++;
92                    w += text[i - c].getBoundingClientRect().width;
93                } while(w < ellipsisWidth);
94                omitIndex = i - c;
95                break;
96            }
97        }
98        return omitIndex;
99    }
100}