CSSで長い文章を省略して省略記号を表示させる方法（1行 / 複数行 / mixin） - NxWorld
CSSを使って文章が長い場合に省略して末尾に省略記号（...）を表示させる方法のまとめです。 すべてp要素に対して適用するのを想定したコードで、全3パターンの実装方法と複数行対応させるスニペットを楽に使うmixinを紹介します。 1行の文章を省略 CSSで文章を省略させると聞くとまずこれを思い浮かべる人も多いと思います。 省略したい文章を括っている要素に対して下記のように記述することで、文章が長かったとしても1行に収まる形に省略され、文末に省略記号が表示されます。 複数行の文章を省略 #1 複数行の文章を省略して同じく文末に省略記号を表示させる方法で、省略したい文章を括っている要素に対して下記のように記述します。 省略させない行数は-webkit-line-clampの部分で指定し、このサンプルコードの場合は3を指定しているので文章が4行以上になってしまうときに3行目の文末で省略されて省略
Chromeの顔認識機能で自動で画像にモザイクを追加できるWebサービス
写真の顔にモザイクを付けたいことがあるが、人物が多く写っている画像の場合は1つ1つにモザイクを付けるのは手間がかかる。 しかしChromeの顔認識機能で自動で画像にモザイクを追加できるWebサービスを使用すれば自動で画像にモザイクを追加できる。 画像顔モザイク追加前 画像顔モザイク追加後 自動顔モザイク追加 自動顔モザイク追加というWebサービスを使用するにはChromeのExperimental Web Platform featuresをEnabled(有効)にする。(要Chromeバージョン68以上) Chromeブラウザで以下URLを開いてEnabledにする。 chrome://flags/#enable-experimental-web-platform-features 設定が終わったら以下のページで画像を追加して顔モザイク画像を自動生成させる。 左下のダウンロードボタンを押
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
