WordPress Snippet

• 記事一覧での本文を非表示にしたい

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

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

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;
}

ブラウザサポート

• CSS プロパティ　text-overflow　のサポート状況

では、考えてみましょう

テストには、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で一行表示をするための唯一の方法というわけでもありませんので　ケースバイケースです。

スクリーンショット

スタイルを適用する前

スタイル適用後