前提
①「width:80%、font-size:14px」内に全角で何文字収まるか調べるcapasity関数を作成し、
②対象となるテキストの文字数をカウントするtextcount関数を作成、
③はみ出した部分を「...」で表示するshorten関数を作成
④ページ読み込み時にshorten関数を実行
というプログラムをネットのものを参考にしつつ自分のサイトに合うように改変した以下のソースコードをまず見て頂けますでしょうか。
該当のソースコード
html
1<style type="text/css"> 2 .sample { 3 width: 80%; 4 font-size: 14px; 5 border-style: solid; 6 margin-top: 30px; 7 } 8 9 .sample * { 10 display: inline-block; 11 } 12 13 .sample div { 14 background-color: yellow; 15 } 16 17 .sample span { 18 background-color: pink; 19 } 20</style> 21<body> 22 <div class="sample"> 23 <div>.sampleに何文字ならキレイに収まるか調べて、</div> 24 <span>文字数が多い場合.sample > div部分を省略して表示させる</span> 25 </div> 26 <div class="sample"> 27 <div>実現させたいのはページ内にあるすべての</div> 28 <span>.sample > divに同じ処理をさせたい</span> 29 </div> 30<script type="text/javascript"> 31/*全角で最大何文字ならキレイに収まるかを調べる関数*/ 32function capacity(s) { 33 34 //算出されたCSSを取得 35 var style = window.getComputedStyle(s); 36 37 //フォントサイズとボックスの幅を数値で取得 38 var fontsize = parseInt(style.fontSize); 39 var width = parseInt(style.width); 40 41 //ボックスに収納できる文字数 42 var mojisuu = Math.floor(width/fontsize); 43 44 return mojisuu; 45}; 46 47 48/*対象のテキスト(.sample)が全角1文字、半角0.5文字で合計何文字になるか計算する関数*/ 49function textcount(n) { 50 51 var nagasa = 0; 52 53 for (i = 0; i < n.length; i++) { 54 55 if(n[i].match(/[ -~]/) ) { 56 57 nagasa += 0.5; 58 } 59 60 else { 61 62 nagasa += 1; 63 } 64 65 66 } 67 68 return nagasa; 69 70}; 71 72 73var sample = document.querySelector(".sample"); 74var str = sample.innerText; 75var strfirst = sample.firstElementChild.innerHTML; 76 77/**/ 78function shorten() { 79 80 var kstr = str; 81 var count = (textcount(kstr)); 82 83 if (count > capacity(sample)) { 84 85 //はみ出してる文字数+4文字をテキストの後ろから削除 86 strfirst = strfirst.slice( 0, capacity(sample) - count -4 ); 87 88 //「…」と連結し、元のテキストを置き換える 89 sample.firstElementChild.innerHTML = strfirst + "…"; 90 } 91 92 //要素の幅が十分にあればそのまま表示 93 else { 94 ; 95 } 96}; 97 98shorten(); 99 100</script> 101</body>
発生している問題・試したこと・実現したいこと
上のプログラムだと73行目でquerySelector()メソッドを使用しているため最初の.sampleしか省略されません。
すべての.sampleの文字数を調べ、それぞれの.sampleの子要素のdivを省略させるにはどうすればいいでしょうか...?
querySelectorAll()メソッドとforEach()メソッドの反復処理を使ったりして試行錯誤してみたのですが根本的な使い方が間違ってるのか前に進めず、迷って質問させて頂きました。
どうぞよろしくお願いします。
上記のコードをforEach文で書き直したコード
html
1<script> 2<!--コメントを受け上記コードの73行目以降をforEach文で修正したものです-> 3var sample = document.querySelector(".sample"); 4var sampleall = document.querySelectorAll(".sample"); 5 6 7sampleall.forEach(function(value){ 8 9 var count = (textcount(value.innerText)); 10 11 if (count > capacity(value)) { 12 13 //はみ出してる文字数+4文字をテキストの後ろから削除 14 value.firstElementChild.innerHTML = value.firstElementChild.innerHTML.slice( 0, capacity(value) - count -4 ); 15 16 //「…」と連結し、元のテキストを置き換える 17 value.firstElementChild.innerHTML = value.firstElementChild.innerHTML + "…"; 18 } 19 20 //要素の幅が十分にあればそのまま表示 21 else { 22 ; 23 } 24}); 25</script> 26




回答3件
あなたの回答
tips
プレビュー