CSSによるexcerpt 本文の概要表示

tenman

という質問がありました。残念ながら提案した方法は採用されませんでしたが、このようなスタイルの使い方は結構需要があるのではないかと思いますので、

カテゴリーアーカイブで、投稿の本文を一行だけ表示するスタイルを考えてみる

text-overflow を　どんなテーマが使っているか

Twentyfourteen

.site-title a,
.site-title a:hover {
	color: #fff;
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

Twentyeleven

.one-column article.feature-image.small .entry-summary {
	height: 150px;
	overflow: hidden;
	padding: 0;
	text-overflow: ellipsis;
}

ブラウザサポート

では、考えてみましょう

テストには、WordPress4.1とTwentyfifteenを使いました。

style.cssに追加したスタイル

.category.archive .entry-content p{
 width:100%;
 overflow: hidden;
 white-space: nowrap;
 text-overflow: ellipsis;
}
/*以下は、テンプレートで、デフォルトの the_content() を使っている場合 the_excerpt()を使っている場合は不要　*/
.category.archive .entry-content p:nth-child(n+2){
 display :none;
}
.category.archive .entry-content *:not( p ){
 display :none;
}

Note:このスタイルは、カテゴリーアーカイブだけに適用されます。また、CSSで一行表示をするための唯一の方法というわけでもありませんので　ケースバイケースです。

スクリーンショット

スタイルを適用する前

1line-before

スタイル適用後

1line

[emulsion_relate_posts]