CSS | 円の中にテキストを敷き詰める

2021-02-05CSS テキストデザイン サンプル集,CSS

CSSで円型のHTML要素の中にテキストをはみ出さずに敷き詰める方法の紹介です。

黒背景や縦書きテキストでのサンプルも紹介しています。

See the Pen CSS | Text in a circle by yochans (@yochans) on CodePen.

円の中にテキストを敷き詰める

円形のHTML要素にテキストを記述すると通常ははみ出してしまうか、折り返してしまうかしてしまいますが、overflowプロパティで「hidden」を指定する事ではみ出した要素を非表示にする事で敷き詰めている様に表示する事が可能です。

.circle{
	width: 200px;
	height: 200px;
	margin: 6px;
	border-radius: 50%;
	overflow: hidden;
}

.circle p{
	margin: 0;
	padding: 0;
	font-size: 14px;
	word-break: break-all;
}

読み物の文章としては使えませんが、デザイン的なものであることを考えword-breakプロパティで微妙な改行もしないようにしています。

黒背景、白文字バージョンは以下のCSSを追加しているだけです。

	background: #000;
	color: #FFF;

縦書き表示をしたい場合は以下のCSSコードを追加します。

	writing-mode: vertical-rl;
	text-orientation: upright;
	word-spacing: -8px;