フォント周りCSSの名前すぐ思い出せないものまとめ

<div class="wrapper _480">
  <p>
		<span>改行で疑問やお悩みを</span>
    <span>お持ちの方も多いのではないでしょうか？</span>
    <span>弊社は改行にとりくんで早5年になります。</span>
    <span>ランディングページや</span>
    <span>コーポレートサイトなど</span>
    <span>数々のサイトで改行に</span>
    <span>取り組んでまいりました。</span>
    <span>弊社がいままで積み上げてきた実績は</span>
    <span>おかげさまでお客様からは</span>
    <span>大変好評いただいております。</span>
    <span>「改行とは何か？」</span>
    <span>「改行を適切に行うことでどんなメリットがあるのか？」</span>
    <span>どんなメリットがあるのか？」</span>
    <span>を、わかりやすく解説します。</span>
  </p>
</div>

<div class="wrapper _768 mt50">
  <p>
		<span>改行で疑問やお悩みを</span>
    <span>お持ちの方も多いのではないでしょうか？</span>
    <span>弊社は改行にとりくんで早5年になります。</span>
    <span>ランディングページや</span>
    <span>コーポレートサイトなど</span>
    <span>数々のサイトで改行に</span>
    <span>取り組んでまいりました。</span>
    <span>弊社がいままで積み上げてきた実績は</span>
    <span>おかげさまでお客様からは</span>
    <span>大変好評いただいております。</span>
    <span>「改行とは何か？」</span>
    <span>「改行を適切に行うことでどんなメリットがあるのか？」</span>
    <span>どんなメリットがあるのか？」</span>
    <span>を、わかりやすく解説します。</span>
  </p>
</div>

.wrapper {
	padding-inline: 15px;
	margin-inline: auto;
}

.wrapper._480 {
	max-width: 420px;
}

.wrapper._768 {
	max-width: 768px;
}

.mt50 {
	margin-top: 50px;
}

p {
	text-align: center;
}

span {
	display: inline-block;
}

<div class="wrapper">
  <p>改行でこんな疑問やお悩みを<wbr>お持ちの方も多いのではないでしょうか？</p>
    <p>弊社は改行にとりくんで早5年になります。</p><p>ランディングページやコーポレートサイトなど</p><p>数々のサイトで改行に取り組んでまいりました。<p>
    <p>弊社がいままで積み上げてきた実績は<wbr>おかげさまでお客様からは<wbr>大変好評いただいております。</p>
    <p>「改行とは何か？」<wbr>「改行を適切に行うことでどんなメリットがあるのか？」</p><p>わかりやすく解説します。</p>
</div>

.wrapper {
	padding-inline: 15px;
	margin-inline: auto;
	text-align: center;
	max-width: 768px;
}

p {
	word-break: keep-all;
	overflow-wrap: anywhere;
	margin: unset;
}

<dl>
  <div>
    <dt>社名</dt>
    <dd>UCHINO株式会社</dd>
  </div>
  <div>
    <dt>資本金</dt>
    <dd>1,000,000円</dd>
  </div>
  <div>
    <dt>事業内容</dt>
    <dd>Webサイトコーディング</dd>
  </div>
</dl>

dl {
	width: 390px;
	margin-inline: auto;
	background-color: #f2f2f2;
	padding: 10px
}

div {
	display: flex;
}

dt {
	width: 30%;
	border-bottom: 1px solid black;
	
	text-align-last: justify;
}

dd {
	width: 70%;
}

<div>
  <p><span class="bg">あなたのこころは</span></p>
  <p><span class="bg">ここにあらず</span></p>
  <p><span class="bg">ゲームがしたいのでは？</span></p>
	<p><span class="tate">8</span>月<span class="tate">18</span>日@現在</p>
	<p><span class="en-tate">Sincerely.@</span>ウチノ</p>
</div>

div {
	writing-mode: vertical-rl;
	background-color: black;
	padding: 10px
}
p {
	color: white;
}
span.bg {
	background-color: gray;
}
span.tate {
  text-combine-upright: all;
}
span.en-tate {
	text-orientation: upright;
}