WEB-dブログ.株式会社プライムネットワーク

最新記事

カテゴリー

リンク

アーカイブ

• 2025年05月(2)
• 2025年03月(1)
• 2025年02月(1)
• 2025年01月(1)
• 2024年09月(1)
• 2024年06月(1)
• 2024年02月(1)
• 2023年09月(1)
• 2023年02月(1)
• 2022年06月(1)
• 2022年05月(1)
• 2022年01月(1)
• 2021年10月(1)
• 2021年08月(1)
• 2020年02月(1)
• 2018年03月(1)
• 2016年12月(1)
• 2016年11月(1)
• 2016年06月(1)
• 2016年02月(1)
• 2015年10月(1)
• 2015年08月(1)
• 2015年06月(2)
• 2014年09月(1)
• 2014年08月(2)
• 2014年07月(1)
• 2014年04月(1)
• 2013年10月(1)
• 2013年09月(1)
• 2013年08月(3)
• 2013年07月(1)
• 2013年05月(2)
• 2013年03月(2)
• 2013年02月(5)

最古記事

改めて、CSS3って凄いなと思う。

いままで画像やjavascriptで表現しなければならなかったことが、いとも容易くできてしまうのです。

とはいえ、すべてのブラウザで上手く動くかどうかは検証しなければなりませんが・・・

そんな中、ブログを作る上で、簡単に出来たらいいなと思っていたものがあったので、書き留めておきます。

オリジナル

こんな感じで文字数を制限してくてるのだ！！

文字が多すぎる場合は、「・・・」に変わる

こんな感じで文字数を制限してくてるのだ！！

これは、どのようなCSSになっているのかというと・・・

.overMoji {
width: 100px;
overflow: hidden;
white-space:nowrap;
text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}

ここで使っているのは、「text-overflow」というプロパティ

とにかくwidthを指定して、省略符号を出したい部分の範囲を決めます。
今回は、widthを100pxにしてみました。

このプロパティに、省略符号をつけたければ「ellipsis」という値、
省略符号を表示しないのであれば「clip」という値をつければいいのです。

その他にもCSS3には、数々の素晴らしいプロパティがあるので、ちょくちょく紹介していきたいと思います。