表示領域をはみ出したタイトルを「・・・」にする

質問

Livedoorブログを使ってます。

添付画像のような相互RSSを設置してみました。

なんとなくいい具合に出来上がったのですが今ひとつ納得出来ません。

タイトルが長すぎて2行になってしまっているのを、1行に納めたいのです。
よく、最後を「・・・」にして1行にまとめているブログを見かけます。

やってみようといろいろ検索したところ、「text-overflow:ellipsis」などを組み入れることにより出来ることは判りましたが、以下のboxというクラスをどこにどのようにhtmlに組み入れれば良いのか分かりません。

そこまで具体的に説明してあるサイトを見つけられませんでした。

たぶん<div class="box">をhtmlのどこかに設置するだと思うのですが、blogrollの中に反映させるためにはどこにどのように設置すればいいのか分からないので教えていただければ幸いです。

見づらくてすみません。

**********　css　***************
.box {
width: 100%;
overflow:hidden;
text-overflow:ellipsis;
-webkit-text-overflow:ellipsis;
-o-text-overflow: ellipsis;
white-space:nowrap;
}
*******************************

********　html　*****************
<div class="blogroll_wrapper">
<div class="blogroll_innner">
<script type="text/javascript">
<!--
var blogroll_channel_id = ｘｘｘｘｘ;
// -->
</script>
<script type="text/javascript" charset="utf-8" src="http://blogroll.livedoor.net/js/blogroll.js"></script>
</div>
</div>
*******************************

回答No.3

sanzero

えっ？とは何ですか？

livedoorブログなら下記を参考にスタイルシートを記述できるんではないですか？
http://help.livedoor.com/blogroll/guide1037

補足

私が書いたcssの内容と同じじゃないですか。

回答No.2

sanzero

ご自分のところのスタイルシートに下記を記述して下さい。
.blogroll-link {
width: 100%;
overflow:hidden;
text-overflow:ellipsis;
-webkit-text-overflow:ellipsis;
-o-text-overflow: ellipsis;
white-space:nowrap;
}

正直そのRSSを読み込んでどのようなHTMLが生成されているのかわからないのではっきりとしたことは言えません。

どのようなHTMLが生成されているのかこちらに書き込んでいただければ、より正確な回答ができます。

補足

えっ？

回答No.1

sanzero

一個一個の▲の行に対してです。
おそらく　.blogroll-link　がaタグのクラスに設定されていると思うのでそこに記述すればいいと思います。

お礼

ありがとうございます。

しかし、他人のRSSをidで呼び出してるので・・・
指定してるのはブログロールのチャンネルIDだけです。

すると、自分の方では「・・・」に出来ないということですか？