jscrollpane.jsで「text-overflow: ellipsis;」を使用する際に注意すること

Yukimi Sato 1,422views 更新:2014年6月13日
<li>
<a href="talk.html">
<span class="date">12:03</span>
山田 太郎, 田村 涼子
<span class="text">京都出張のおみやげ買ってきたので休憩室に置いておきました。</span>
</a>
</li>

<span class="text">京都出張のおみやげ買ってきたので休憩室に置いておきました。</span>

部分に

.text{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

と指定を入れた時、通常であれば外側のブロックに幅指定されていれば問題は発生しませんが、jscrollpane.jsを使用している時は.text自体にも幅指定をしないと、不要な横スクロールが表示されます。

.text{
    width:150px; ←幅指定を追加する
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

 

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません