こんにちは！自分の職業書く時名前が長くてめんどくさい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文字以内らしい。デザインの先生が教えてくれた。