CSSで出来る!決められた文字数を超えた場合に「…」を表示させるコード

この記事のカテゴリ
WEBサイト運営 / 各種コード
この記事に付けられたタグ

jQueryなどJavaScriptを使わず、指定した文字数やピクセル幅を超えてしまいはみ出た部分を「…」と表示させる事がCSSコードのみで可能です。

例えばワードプレスのテーマを紹介しているこのサイトで使っています。
スタイルシート「text-overflow ellipsis;」のサンプル
リンク:WordPressテーマギャラリー
オレンジ色の枠にあるテーマの名前が長い場合は、枠からはみ出たり2行になってしまいます。
そうすると全体のレイアウトが崩れるため文字数を制限しています。

コードはこちらを使います。

text-overflow: ellipsis;


これに「overflow:hidden;」と改行防止の「white-space:nowrap;」
Firefox対応に「-moz-text-overflow:ellipsis;」、Opera対応に「-o-text-overflow:ellipsis;」を加えて以下のように記述しました。

h2 {
    overflow: hidden;
    width: 305px;
    white-space: nowrap;
    text-overflow: ellipsis;
    -moz-text-overflow:ellipsis; /* Firefox */
    -o-text-overflow: ellipsis; /* Opera */
}

h2の部分とwidthを、使用するブロックにあわせて変更してください。

ただ、あまり「…」が多いようだとSEO的に少し心配が・・・
ソースコードを見ると省略された部分「…」のような点は存在せず、ちゃんと記述どおりのテキストが表示されています。

そのため一昔スパムサイトで多用された「display:none;」や「overflow:hidden;」などのように、グーグルさんから「ユーザーに対して文字を隠してる行為」と受け取られても仕方ないとも思えそうなので、SEOが心配であれば必要以上に「…」が表示される部分はない方がいいと思います。

SEOとは?
検索エンジン最適化と略されるSEOは、検索結果でより上位に表示出来るようWEBページのコードを書き換えるなどの施策を行う事です。
LINEで送る
Pocket

関連記事

コメントを書き込む

コメントは承認後に公開されます。メールアドレスは公開されません。
*」は必須項目です。