JavaScriptで表示文字数を制御したい

2012/12/31 07:35

このQ&Aのポイント

Google Feed APIを使い、JavaScriptで自分のホームページにRSSのニュースを表示しています。文字の大きさと行間は、以下のようなcssを書くことによって調整できましたが、現在の状態だと全部のニュースを表示してしまうので表示する文字数を「先頭から40文字」までにしたいのですが、そのやり方が分かりません。
具体的に、どうすればよいのか、ご教示いただければと思っています。大変困っているので、何卒よろしくお願い致します。
以下、参考までにjavascriptも載せておきます。

JavaScriptで表示文字数を制御したい

Google Feed APIを使い、JavaScriptで自分のホームページにRSSのニュースを表示しています。文字の大きさと行間は、以下のような <style type="text/css"> #feed { font-size:16px; } #feed li { height: 4em; } </style> のcssを書くことによって調整できましたが、現在の状態だと全部のニュースを表示してしまうので表示する文字数を「先頭から40文字」までにしたいのですが、そのやり方が分かりません。具体的に、どうすればよいのか、ご教示いただければと思っています。大変困っているので、何卒よろしくお願い致します。以下、参考までにjavascriptも載せておきます。 <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("feeds", "1"); function initialize() { //RSSフィードの取得 var feed = new google.feeds.Feed("RSSフィードのアドレス"); //表示したいエントリー数 feed.setNumEntries(4); //実際に読む込む feed.load(function(result) { //読み込めたか判別 if (!result.error) { //表示部分を選択 var container = document.getElementById("feed"); for (var i = 0; i < result.feed.entries.length; i++) { var entry = result.feed.entries[i]; var div = document.createElement("li"); var a = document.createElement("a");a.href = entry.link; a.target = "_blank" ; //日付を取得 var date = new Date(entry.publishedDate); var yearNum = date.getYear(); if (yearNum < 2000) yearNum += 1900; a.appendChild(document.createTextNode(entry.title)); //タイトルと日付の行を変える a.appendChild( document.createElement( "br" ) ); //a.appendChild(document.createTextNode(" (" + date.toLocaleDateString() + ")" )); //↑chromeで年月日が表示されない a.appendChild(document.createTextNode("(" + yearNum + "年" + (date.getMonth()+1)+"月"+date.getDate()+"日"+")" )); div.appendChild(a); container.appendChild(div); } } }); } google.setOnLoadCallback(initialize); </script>

mcse
お礼率55% (148/266)

JavaScript
回答数1
ありがとう数1

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

babu_baboo
ベストアンサー率51% (268/525)

2012/12/31 11:33 回答No.1

たんじゅんに、 #feed li { height : 4em; width : 15em; text-overflow : ellipsis; overflow : hidden; white-space: nowrap; } ではだめですか？もしくは、ぜんかくくうはくをはんかくにして <!DOCTYPE html> <meta charset='UTF-8'> <title></title> <style> #feed { 　font-size:16px; } #feed li { 　height : 4em; } </style> <body> <ol id='feed'></ol> <script type='text/javascript' src='http://www.google.com/jsapi'></script> <script> google.setOnLoadCallback (function () { 　var url = 'http://okwave.jp/rss.php?type=recent_answered_question&c=254'; 　var feed = new google.feeds.Feed (url); 　　feed.setNumEntries (10); 　feed.load (function (result) { 　　if (! result.error) { 　　　var doc = document; 　　　var FGM = doc.createDocumentFragment (); 　　　var LI = doc.createElement ('LI'); 　　　var A = doc.createElement ('A'); 　　　var title = doc.createTextNode (''); 　　　var date = doc.createTextNode (''); 　　　A.target = '_blank' ; 　　　A.appendChild (title); 　　　A.appendChild (doc.createElement ('BR')); 　　　A.appendChild (date); 　　　　　　LI.appendChild (A); 　　　for (var i = 0, I = result.feed.entries.length; i < I; i++) { 　　　　var entry = result.feed.entries[i]; 　　　　var d = new Date(entry.publishedDate); 　　　　A.href = entry.link; 　　　　title.data = entry.title.substring (0, 39);//←ここ　　　　date.data = ['(', 　　　　　d.getFullYear (), '年', 　　　　　d.getMonth () +1, '月', 　　　　　d.getDate (),　　 '日', 　　　　　')'].join (''); 　　　　FGM.appendChild (LI.cloneNode (true)); 　　　} 　　　doc.getElementById ('feed').appendChild (FGM); 　　} 　}); }); google.load ('feeds', '1'); </script> とか… いちいち、createDocument するよりも、ひながたから、cloneNode でこぴーして createDocumentFragment で、つくったものに、appendChild しています。はやいから！？

質問者

お礼 2012/12/31 16:28

babu_baboo様アドバイスいただきまして、誠にありがとうございました！ #feed li { height : 4em; width : 15em; text-overflow : ellipsis; overflow : hidden; white-space: nowrap; } で、できました！ cssで制御すれば簡単だったんですね！とても、目から鱗でした！大変感謝いたします！