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

解決済

質問者：mcse
質問日時：2012/12/31 07:35
回答数：1件

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>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： babu_baboo
回答日時：2012/12/31 11:33

たんじゅんに、

#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_qu …
　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 しています。
はやいから！？

- 0
- 件

通報する

この回答へのお礼

babu_baboo様

アドバイスいただきまして、誠にありがとうございました！

#feed li {
height : 4em;
width : 15em;
text-overflow : ellipsis;
overflow : hidden;
white-space: nowrap;
}

で、できました！

cssで制御すれば簡単だったんですね！

とても、目から鱗でした！

大変感謝いたします！