【JS】JavaScriptやCSSでn文字以上を省略
こんにちは!自分の職業書く時名前が長くてめんどくさい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文字以内らしい。デザインの先生が教えてくれた。
PREV
2020-05-29
【JS】日本でVueがReactより人気な理由を考える
NEXT
2020-06-04
【JS】ReactのclassNameの色々な書き方紹介
LINK
リンク
Twitter
GitHub
TAGS
タグ
LATESTS
最新の記事
POPULAR
人気の記事
- CSS2021/04/29【CSS】右寄せの方法は結局flexが一番良さそう
- React2020/07/13【JS】Reactのstyleの使い方、書き方いろいろ
- Payment2021/10/16GooglePayでVisaタッチを使う時に知っておきたい過酷な現実【追記あり】
- Others2021/07/11Slackに予約投稿機能ができて嬉しいけどそれでもまだ少し不満な理由【追記あり】
- CSS2020/04/30【CSS】tailwind.cssでよく使うデザインパターン
- CSS2019/03/30【CSS】100vhは「一画面」ではないという罠
- CSS2020/06/09【CSS】max-font-sizeやmin-font-sizeを使いたくなったら
- Vue2019/06/29【JS】Vueの:classの書き方3通り
- JavaScript2020/09/02【JS】yarnの長所とyarnからnpmに戻ってきた理由
- React2020/06/04【JS】ReactのclassNameの色々な書き方紹介