CSSWeb制作メモ
CSS

行が長くなったときに省略したりスクロールバー出したりする

行の末尾を三点リーダーで表示

指定した高さを超えたとき、最終行の末尾を「…」で表示する。

山路を登りながら、こう考えた。智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。住みにくさが高じると、安い所へ引き越したくなる。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。人の世を作ったものは神でもなければ鬼でもない。
.line-clamp {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	height: 8.5rem;
	overflow: hidden;
}

横幅超えたときに横にスクロールにする

やはり向う三軒両隣りにちらちらするただの人である。ただの人が作った人の世が住みにくいからとて、越す国はあるまい。
.overflow-scroll {
	white-space: nowrap;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

スクロールバーのデザイン変える

スマホだとスクロールバーの有無がわかりづらいけど以下のcssで常に表示可能。
PCはChrome、Firefox、Edge、スマホはChrome、Operaで確認済み。

あれば人でなしの国へ行くばかりだ。人でなしの国は人の世よりもなお住みにくかろう。越す事のならぬ世が住みにくければ、住みにくい所をどれほどか、寛容て、束の間の命を、束の間でも住みよくせねばならぬ。ここに詩人という天職が出来て、ここに画家という使命が降る。あらゆる芸術の士は人の世を長閑にし、人の心を豊かにするが故に尊とい。住みにくき世から、住みにくき煩いを引き抜いて、ありがたい世界をまのあたりに写すのが詩である、画である。あるは音楽と彫刻である。こまかに云えば写さないでもよい。
.scrollbar {
	height: 5.65rem;
	overflow: auto;
	scrollbar-width: thin;
	scrollbar-color: rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.2);
}
.scrollbar::-webkit-scrollbar { width: 10px;}
.scrollbar::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.2);}
.scrollbar::-webkit-scrollbar-track-piece:start { background: rgba(0, 0, 0, 0.2);}
.scrollbar::-webkit-scrollbar-track-piece:end { background: rgba(0, 0, 0, 0.2);}