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

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

例えばワードプレスのテーマを紹介しているこのサイトで使っています。

リンク：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が心配であれば必要以上に「…」が表示される部分はない方がいいと思います。