いろは2986023 views
中学数学621382 views
小学社会308636 views
Computer365120 views
LaTeX957300 views
りんご192546 views
教育148875 views
小学理科717236 views
高校国語785655 views
MathPython491378 views
Help
Tools

English

SwiftUI Text の複数行表示

長いテキストを表示するとき、行数の制限や切り詰め方、配置の指定が必要になることがあります。SwiftUI では複数のモディファイアでこれらを制御できます。

行数を制限する

.lineLimit() で表示する最大行数を指定します。

Text("これは非常に長いテキストです。複数行にわたって表示される可能性がありますが、lineLimit で制限できます。")
    .lineLimit(2)

nil を指定すると無制限になります。

Text("制限なし")
    .lineLimit(nil)

iOS 16 以降では範囲指定もできます。

Text("長いテキスト...")
    .lineLimit(2...4)

この場合、2行から4行の間で自動調整されます。

切り詰めモード

テキストが収まりきらないときの省略位置を .truncationMode() で指定します。

Text("これは非常に長いテキストで、末尾が省略されます")
    .lineLimit(1)
    .truncationMode(.tail)  // デフォルト

Text("これは非常に長いテキストで、先頭が省略されます")
    .lineLimit(1)
    .truncationMode(.head)

Text("これは非常に長いテキストで、中央が省略されます")
    .lineLimit(1)
    .truncationMode(.middle)

複数行の配置

.multilineTextAlignment() で複数行テキストの揃え方を指定します。

Text("左揃えのテキスト\n複数行あります")
    .multilineTextAlignment(.leading)

Text("中央揃えのテキスト\n複数行あります")
    .multilineTextAlignment(.center)

Text("右揃えのテキスト\n複数行あります")
    .multilineTextAlignment(.trailing)

最小スケール

テキストが収まらないとき、フォントサイズを自動縮小させることもできます。

Text("長いテキストを1行に収める")
    .lineLimit(1)
    .minimumScaleFactor(0.5)

この例では、必要に応じて元のサイズの 50% まで縮小されます。

これらのモディファイアを組み合わせることで、様々なレイアウト要件に対応できます。