こんにちは！自分の職業書く時名前が長くてめんどくさいMizutani(@sirycity)です。フロントエンドエンジニア(12文字)

今回はこんな感じに長い文字列を省略する方法についてです。

「フロントエンドエンジニア」 を 「フロントエ…」 みたいにします。

CSSでできる場合

JSを使わずにCSSでできるケースもあります。もし

• 省略したい文字がviewで表示される際に改行が入らないことが確定していて

• 文字数ではなくviewの幅を基準として文字を省略したい場合は

このCSSを使えばok。

<div class="omit">ここにどんな長い文章が来ても100pxを超えたら省略される</div>

.omit {
  width: 100px; /* この幅を超えると省略 */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

ねっ簡単でしょ？JS使うまでもない。逆にJS必要なのはこのケースね。さっきの逆。

• 改行することがある

• 横幅じゃなくて文字数を基準にしたい

JSでやる場合

結論

これでok。わかりやすくカリー化しとく。

const omit = text => len => ellipsis =>
  text.length >= len ? text.slice(0, len - ellipsis.length) + ellipsis : text

omit('フロントエンドエンジニア')(8)('...')
// フロントエ...

omit('フロントエンドエンジニア')(100)('...')
// フロントエンドエンジニア

omit('フロントエンドエンジニア')(8)('(以下略)')
// フロン(以下略)

omit('フロントエンドエンジニア')(4)('(ry')
// フ(ry

より厳密に書くならこう。数字間違いとか旧字や絵文字が入ってもこれなら動く。

const omit = text => len => ellipsis =>
  [...ellipsis].length < len && [...text].length >= len
    ? text.slice(0, len - [...ellipsis].length) + ellipsis
    : text

ただこれ↑でもごく一部の文字は上手く判定できない。この記事見ると良いかも。

サロゲートペア、異体字、絵文字に対応した文字数の数え方

よく分かる解説

使い方は簡単！ omit(省略したい文字列)(何文字以上で省略するか)(省略した時の記号)こんだけ。

…特に言うこともなく、ほんとにこれだけ。

おまけ

バッククォート+カリー化でめっちゃかっこいい書き方するとこう。

const omit =
  ([text]) =>
  ([len]) =>
  ([ellipsis]) =>
    text.length >= (len | 0)
      ? text.slice(0, (len | 0) - ellipsis.length) + ellipsis
      : text

omit`フロントエンドエンジニア``8``...`

// フロントエ...

かっこいい。使うかどうかは別の話。

バッククォートとカリー化を使ったかっこいい書き方の記事もよかったらみてね。

さいごに

Yahooニュースの見出しは13文字以内らしい。デザインの先生が教えてくれた。