【CSS】文字周りのコーディング

デザインではよく出会うのに、いざコーディングするときにはググって調べるCSSの代表的なものとして、文字周りのコーディングがあるなあと感じました。

例えば、このふたつです。

  • pタグの途中でスマホでは改行、PCでは改行しない。
  • 最新記事のタイトルや文章を全部表示せず、省略する
    (HTMLで文字を物理的に削るのではなく、CSSで表示だけを調整したい)

改行レスポンシブ

See the Pen スマホのときだけ改行するCSS by mp-webmagic (@mp-webmagic) on CodePen.0

(HTML、CSSボタンを押すとそれぞれソースが読めます)

PCの方は、CSSなどを押して2カラムにすると改行の変化が確認できます。

なるほど、481px以上のときにはbrタグをdisplay:noneするだけでよかったのか~!

参考:スマホでは任意の位置で改行し、PCでは改行しない見出し:メモ

最新記事のタイトルや文章を全部表示せず、省略する

よくあるWordPressあるあるコーディング…

最新記事を3つ表示するとき、タイトルや本文を全部表示せず、一行にして残りを省略するCSSです。

See the Pen 文字を省略して一行にするCSS by mp-webmagic (@mp-webmagic) on CodePen.0

(HTML、CSSボタンを押すとそれぞれソースが読めます)

clipで切り取って後ろにafter要素で矢印ボタンとかMOREボタンつけると良さそうな気がしてきました。

参考:【複数行にも対応】長過ぎる文字列を省略して末尾を三点リーダー(…)にする方法いろいろ

参考:text-overflow: ellipsisが上手く動作しない? 解決してあげよう。