2016.02.29 2021.10.10

CSS｜テキストが表示領域を超えている時に途中でテキストを切って「・・・」を表示させる方法

KOSAERU WEB MEMO CSS

省略可能なテキストを省略して「・・・」を表示させます。
デザイン的に整列して表示させたい時なんかに便利

p {
white-space: nowrap;
width: 100%;
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
}

p {

white-space: nowrap;

width: 100%;

overflow: hidden;

-o-text-overflow: ellipsis;

text-overflow: ellipsis;

}

text-overflow:ellipsis

ちなみにWordPressでしたら↓↓の方法もありますです。

WordPress 記事タイトルの文字数制限

2017.09.07 2023.06.22

ME CSSで特定の画像を消すか、サイズ調整したいと思った時に詰まったもんでメモ。ようはCSSの属性セレクタを利用することで、以下のようなことがピンポイントでイジることができた。【例】こんなことできます ('ω')b 特定のGIF画像…

2021.02.09 2023.06.22

CSSのみで作れるドロワーメニュー CSSのみで作れるってとこが良いですね。 See the Pen drawer menu by himeka223 (@himeka223) on CodePen. スクロールすると見出しを固定用語集…

2016.02.23 2021.10.10

このブログのスマホ用テンプレートで採用してみたモーダルウィンドウ。スマホではメニューや検索フォームを隠して、ファーストビューをすっきりさせたかったので採用してみました。あと、今どきっぽくてカッコ良いかと思ったので。 ▼モーダルウィンドウを…

2016.10.18 2021.10.10

https://www.youtube.com/watch?v=ZOiRwXOIsx4&feature=youtu.be https://twitter.com/webcreatorbox/status/788175303835262976 ▼CSS ICON -- …

2021.01.24 2023.06.22

GIRL リンクをテキストリンクではなくボタン風にしたい！ GIRL それだけでなくボタンを押したような動きが欲しい！ ME そんな時はCSS使えば、押した時（クリックした時）にポチって沈むような動きを…

2016.05.17 2021.10.10

これまで明朝体を使う時は画像を使っていたけど以下のように、CSSのfont-family指定で割と綺麗なカンジで使えたので、今後は画像を使わなくても良いかも。と、いうことでメモメモ ((φ(-ω-)ｶｷｶｷ [crayon-68038a7ca854a52…