文字列を特定の文字数で丸めたい時にphpだと mb_strimwidth 関数があります。

これと似たようなことが出来るjQueryプラグインを作りました。

使い方は簡単で、jQueryとjquery.strimwidth.jsを読み込んだら、指定の要素に以下のようにしてstrimwidth関数を実行してください。

オプションで widthに数値を渡すと丸める文字数が指定できます。（初期値：20）

trimmarkerに文字列を渡すとで最後に付け足す文字も変更できます。（初期値：…）

    <div class="block">
        <p>このテキストは本当は１００文字あります。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。</p>
    </div>

    <script type="text/javascript" src="jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="jquery.strimwidth.js"></script>
    <script type="text/javascript">
    $(function() {
        $('.block p').strimwidth({
          width: 20, //丸める文字数
          trimmarker: '…' //最後に付け足す文字
      });
    });
    </script>

これで↓のようなテキストだったのが…

↓このようになります。

jQueryのプラグインなので複数の要素にも適用可能です。

↓のように複数のp要素にも指定できます。

    <!-- .block -->
    <div class="block">
        <p>このテキストは本当は１００文字あります。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。</p>
        <p>このテキストは本当は１００文字あります。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。</p>
        <p>このテキストは本当は１００文字あります。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。</p>
    </div>
    <!-- /.block -->

    <script type="text/javascript" src="jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="jquery.strimwidth.js"></script>
    <script type="text/javascript">
    $(function() {
        $('.block p').strimwidth({
            width: 20, //丸める文字数
            trimmarker: '…' //最後に付け足す文字
        });
    });
    </script>

↓こうなります。

↓ダウンロードはこちらから↓

[Download – jquery.strimwidth.js]