text-overflow , -webkit-line-clamp, -o-ellipsis-lastline 省略プロパティとの付き合い方

WordPressのテーマRaindropsバージョン1.457で文字列の省略プロパティについて考えています。

2017になってから、Raindropsは、新規新ストール(テーマをインストールしてから一軒も記事を作っていない場合)従来の黒系3カラムから、ミニマル1カラムにデフォルト表示を変更しています。

デフォルトを変更すると、1カラムでの表示にどうしても注意がいくようになります。

解決しなければならないだろうな といった事が、いくつか見つかっているのですが、1.457では、 text-overflow , -webkit-line-clamp, -o-ellipsis-lastline テキストの省略プロパティについて、Raindropsなりの、実装を行うつもりです。

関連投稿を、個別投稿ページで表示できるようにしました

関連投稿のタイトルの行数を指定する機能をカスタマイザーに付けましたが、文字列が省略された場合に、ツールチップでタイトル全文を表示する実装にしました。
省略がない場合は、ツールチップは表示しません。

なぜ、テキスト省略プロパティなのか

1カラムレイアウトは、モバイル環境などで、縦スクロールがすごく簡単になったため、縦型ブラウザを意識したものです。

コンテンツは、数カラムの四角いボックスの中に配置されることケースをたびたび見るようになりました。

コンテンツを、一定の高さに保つデザインでどうしても発生するのが、WordPressに標準で実装されている 要約文機能(the_excerpt())に関連する問題です。

レスポンシブレイアウトの場合、ブラウザの幅により、コンテンツの高さが変わってしまって、レイアウトが崩れやすくなる傾向が出ます。

Raindropsテーマの場合、レスポンシブのブレークポイントは、640px デフォルトページ幅は1280pxです。

補助的にコンテンツ幅をユーザーが設定できる機能を持っています。

カスタマイザーの「レイアウトとサイドバー」の項目に、「デフォルトサイドバーのレスポンシブ設定」「エキストラサイドバーのレスポンシブ設定」等で、サイドバーの折り畳み位置を指定できる機能を持たせてユーザーのレスポンシブ画面でのコンテンツの幅方向の変化に対応してもらうためです、

1カラムで、これらの機能を使わない場合、レスポンシブな四角のブロックを配置すると、640-1280の区間で、縦横半分、面積で1-4倍の変化が発生します。

横幅が狭まると、高さ方向にブロックがのびてしまいすぎる時に、行数を制御を可能にする機能が必要だと考えました。

こんなことから、「text-overflow , -webkit-line-clamp, -o-ellipsis-lastline 省略プロパティ」を学ぶ必要が出てきました。

text-overflow で行う 1行だけの文字省略は、あまり考えずに使ってきたのですが、複数行でのクリップについていろいろ勉狂してみると、「マルチラインの文字省略は、良い方法なのか?」という疑問が湧いてきました。

  • マルチラインの文字省略は、どんな良い事を生み出すのか?
    • ユーザー:本当は書いてあるはずの、文字が読めなくなる
    • WEBサイト運営者:伝えたくて書いていたことが、表示できない環境を生む
    • テーマ制作者:テーマのレイアウトが崩れなくて「らくちん」

テーマやカスタムテンプレートを作っている人には、「すごいやりたい事」でも、コンテンツを作っている人にとっては、良い事はない。

共有できることは、レイアウトが崩れて「グダグダになるのはゴメンダ」という事だろう。

では、Raindropsでは、どういう妥協点を作り出せばいいのか、それがRaindrops1.457の課題になりました。

コーディングスタート

従来から実装済みのCSSクラスを見直す。

  • 四角を作る rd-square,丸を作る rd-roundクラスを、見直し
    • ブロックの縦横中央にテキストを配置する centeredクラスが、rd-square,rd-roundと併用すると、正常に動作しない問題を修正する
  • p要素,h*要素,インライン要素で、行数指定し、その範囲内でしかテキストを表示しない機能を作る
  • ellipsisに、重要度を置かないで、必要なら全文が表示可能なリンクや、モーダルボックスで全内容を表示可能な方法を提供する

行数指定し、その範囲内でしかテキストを表示しない機能を作る

要素に、trancate クラスを指定し、data-rowsで行数を指定する事で、表示ブロックサイズ内のテキストを表示できるようにした。

<p class="trancate" data-rows="1"><span class="multiline-text-overflow">グリッドレイアウト</span></p>

HTMLは、以下のようになります

<p class="trancate off-trancate" data-rows="1" style="height: 20px;"><span class="multiline-text-overflow">グリッドレイアウト</span></p>

off-trancateは、文字列が省略されていない場合に表示、on-trancateは、文字列が省略された場合に、追加されます。
styleのheightは、行数と、line-heightを掛けた値です。

三点リーダーが必要な場合は、スタイルを検討してみてください。

実験用に作ったのは、以下のようなスタイルでした。

.on-trancate .multiline-text-overflow:after{
 content:'...';
 color:red;
 display:inline-block;
 position:absolute;
 right:1em;
 bottom:.2em;
 z-index:1;
 font-size:13px;
}

追加:もう少しちゃんと考えてみたもの、multiline ellipsis 備忘 - 三点リーダーのCSS

動作サンプル

hello

グリッドレイアウト

link

グリッドレイアウト

test

2列

ブラウザ幅を600px程に狭めて、リロードしていただくと、「グリッドレイアウト」の文字が切り詰められます。切り詰められた場合、下方にリンクが表示され、
左側のリンクは外部リンク、2番目のリンクは、モーダルボックスを表示します。

モーダルボックスのコーディングパターンは、自動的に追加される機能を参照してください。

ソース

<div style="display:flex">

		<div class="rd-square">
			<div class="centered content">
				<h3>hello</h3>
				<p class="trancate" data-rows="1">グリッドレイアウト</p>
<a href="http://www.tenman.info">link</a>
			</div>
		</div>

		<div class="rd-square">
			<div class="centered content">
 <p class="trancate" data-rows="1">グリッドレイアウト</p>
 <a href="https://tenman.info/labo/css/?p=5539#modal_box_5539_2" class="modal-link" title="hello world">test</a>
</div>
		</div>

		<div class="rd-round">
			<div class="centered content">2列</div>
		</div>

		<div class="rd-square">
			<div class="centered content">3列</div>
		</div>

		<div class="rd-square">
			<div class="centered content">4列</div>
		</div>

</div>

<div class="rd-modal" id="modal_box_5539_2">
	<div class="color4">
		<div class="header color-3 block">
 <h3>hello world</h3>
 </div>
		<div class="body">
			
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <div class="footer color5 block"> <a href="#page" ><span class="lb-close color5 pad-s corner">Close</span></a> </div> </div> </div>

この投稿のカスタムCSS

.rd-round,.rd-square{
 width:290px;
 margin:1em;
}
.on-trancate + p .modal-link, .on-trancate + p .modal-link, .on-trancate + p a, .on-trancate + a{
 display:block;
}
.off-trancate + p .modal-link, .off-trancate + p .modal-link, .off-trancate + p a, .off-trancate + a{
 display:none;
}
.centered h3{
 margin-top:0;
 margin-bottom:0;
}


新着記事

コメントは受け付けていません。