CSSだけでテキストのラップをする。

スポンサーリンク

深夜遅くに、こんばんは。

関係ないですがカテゴリに学んだカテゴリーを追加しました。
このカテゴリでは覚えてて損はないでしょ的なことと、忘れないように・・・って感じのことを書いておきます。
なので多分フォーマットはしっかりしてないです。

CSSだけでテキストのラップをする

テキストのラップ?いわゆるテキストが長く続いた時に…等を表示させるあれです。あれ。便利ですよね。
あれって、サーバーサイド側で処理する人が多いんですが、CSSにもあるんです。

.text-wrap {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-text-overflow: ellipsis;
}

こういうのです。私はこんな風にクラスを作って使いたい時に使ってます。

ついでなのですが、サーバーサイド側でラップした際にはしっかりとタグの属性に元のテキストを追加をしておきましょう。これは自分はやってるのですが、するべきなのかどうなのかは不明です。

あいう...

こんな感じで。

ではではー。

コメント

タイトルとURLをコピーしました