文字を省略させるためのCSS「text-overflow」FacebookTwitterhatenaLINEニュースサイトでの記事一覧、ECサイトでの商品一覧などで、長い文字は1行分だけ表示させれて文末に「...」を付ける。これはよく使われる表現ですね。この文字省略を実現するにあたり、PHPやJavascript等で文字数をカウントし、指定した文字数を超えた場合は「...」を付けて文字を省略する、という手法がよく使われるかと思います。PHPやJavascript等のプログラムで制御せずとも、CSSで実現する事ができます。text-overflowこのtext-overflowプロパティは「決まった横幅を超えたら省略するよ」という便利なプロパティで、実際に使用する場合はwidth、overflow、white-spaceなども同時に指定します。HTMLをこんな感じで記述します。文字列を省略するためのプロパティで、指定した横幅に達すると文末に「...」が付くのです。</p>続いてCSSはこのように記述します。block;」を追記してください。Chrome、Safari、Opera用のベンダープレフィックスも付けています。する事でコンテンツ幅100%を超えた文字は省略されて「...」が付くようになります。実際の表示は下記のようになります。文字列を省略するためのプロパティで、指定した横幅に達すると文末に「...」が付くのです。text-overflowだけ覚えておけば良いですか?いえ、そういう訳ではありません。いうのも、text-overflowは基本的に複数行に対応していません。途中で<br>を入れておけば表示はされますが、という内容なので、原則1行表示のために使用します。そのため、「2行程度で省略させる」という仕様には向きません。そんな時はPHPやJavascriptを使用しましょう。用途が合えばとても便利なCSSプロパティ「text-overflow」のご紹介でした。画像の下に数ピクセルの謎の余白が出来てしまう時に解決できるCSSサイトに画像を表示するならimgタグ、divなどで囲ってレイアウトを調整、よくある日常の作業なのですが、たまに悩まされる時があります。今や当然のように記述するようになったHTML5で追加されたタグ。<header>や<footer>、<nav>など、これまで...便利なcalc()関数でwidthやfont-sizeの値を計算式で指定レイアウトを組む時、特に横幅可変やレスポンシブ対応の際に横幅や余白の計算は不可欠ですね。横幅いっぱいに伸ばしたいけど50pxだけ余白を残したい時。偶数や奇数ごと、3つごとや5つごと、といった指定や、n番目のみ、という指定。CSSを指定した要素にだけ適用したい場面はよくありますが、そんな時に便利な疑似クラス...スマホ用サイト、縦向きと横向きでCSSの指定を切り替える記述方法2014年現在、あるのが当たり前になりつつあるスマートフォン用サイト。コメントをキャンセルメールアドレスが公開されることはありません。