省略表示Truncation

「省略表示（Truncation）」を実装してください。

## これは何か
入りきらない文字を途中で切り、末尾に「…」を付ける表示。1行や決まった行数に収めたいときに使う。

## 使いどころ
- 一覧の1行に、長さの違うタイトルを収めたいとき
- 幅が決まっている枠に、可変の文字を入れるとき

## 実装の要件
- 1行: white-space: nowrap + overflow: hidden + text-overflow: ellipsis
- 複数行: display: -webkit-box + -webkit-box-orient: vertical + -webkit-line-clamp: 表示する行数 + overflow: hidden。-webkit-box-orient: vertical が無いと効かず、overflow: hidden が無いと…だけ付いて残りの行がはみ出す
- 大事な情報が切れる位置に来ないようにする。日付や金額は先に置く
- 省略した全文を読む手段を残す。title 属性かツールチップ、または詳細ページへ
- 2行や3行で切るなら、接頭辞つきの -webkit-line-clamp で書く。Chrome・Edge・Safari・Firefox のすべてで動く（Firefox は 68 から）
- 接頭辞なしの line-clamp は書き足さない。Safari 18.2〜18.3 では、併記すると -webkit-line-clamp が効かなくなる不具合があった

## アクセシビリティの要件
- title 属性だけで全文を補わない。タッチ環境では出ない
- 省略されていることが見た目で分かるようにする（…を付ける）
- 文字を拡大したときに切れ方が変わる。固定の高さで隠さない

## 参考にする実装
この形を出発点にして、プロジェクトの命名規則・色・余白に合わせて調整してください。

```html
<div class="x-ellipsis">
  <p class="x-ellipsis__one">1行で切る例：パーツの名前が揃っていないときに起きること</p>
  <p class="x-ellipsis__two">2行で切る例：呼び名が人によって違うと、指摘が伝わるまでに往復が増えて、直すより説明する時間のほうが長くなります。</p>
</div>
```

```css
/* 貼った先のリセットに頼らないよう、この部品の中だけ border-box にする */
.x-ellipsis,
.x-ellipsis *:not([class*="fa-"]),
.x-ellipsis *:not([class*="fa-"])::before,
.x-ellipsis *:not([class*="fa-"])::after {
  box-sizing: border-box;
  /* 貼った先の既定の書体に引きずられないようにする。書体が変わると
     文字の幅と高さが変わり、枠のサイズまでずれる */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif;
}

.x-ellipsis {
  width: 232px;
}
.x-ellipsis__one {
  margin: 0 0 9px;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.x-ellipsis__two {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  margin: 0;
  font-size: 12px;
  line-height: 1.7;
  overflow: hidden;
}
```

## 出力の約束
- HTML と CSS を分けて出す。JavaScript が要るときは素の JavaScript で書き、UIフレームワークは使わない。
- 参考実装がアイコンに Font Awesome のクラスを使っている場合は、プロジェクトで使っているアイコンかインライン SVG に置き換えてよい。
- 上のアクセシビリティ要件を満たす。満たせない箇所があるときは、理由を添えて先に知らせる。
- 色・角丸・余白は既存のデザイントークンがあればそれを使う。無ければ CSS 変数として切り出す。