[SwiftUI]Textの末尾に出る三点リーダーの"…"を消す

これはなに？

Textに表示される末尾の3点リーダー(…)を消す方法について記載します。
これに地味にハマりました...

サンプルコードも置いておきます。
https://github.com/rnishimu22001/SwiftUIPlayground/blob/master/SwiftUIPlayground/RemoveThreePointLeaderPlayground.swift

検証環境

Xcode12.0

素朴な例

例えば、テキストの幅と高さの描画できる範囲を固定して描画したい場合に以下のようなコードを書いたとします。

struct RemoveThreePointLeaderPlayground: View {
    var body: some View {
        Text("Hello, World!")
            .colorInvert()
            .frame(width: 70, height: 20)
            .background(Color.red)
    }
}

その場合、Textの文字が収まりきらなければ"…"で省略されることになります。

これを消していきます。

手順

Textを親Viewより広げる

fixedSize(horizontal:vertical:)を使うことで親Viewのレイアウトに関係なく、子Viewのレイアウトが固定されます。

https://developer.apple.com/documentation/swiftui/view/fixedsize(horizontal:vertical:)

struct RemoveThreePointLeaderPlayground: View {
    var body: some View {
        Text("Hello, World!")
            .fixedSize(horizontal: false, vertical: true)
            .colorInvert()
            .frame(width: 70, height: 20)
            .background(Color.red)
    }
}

これにより、親Viewの大きさに関わらず改行されます。
なので省略時にでる三点リーダーが描画されなくなります。

表示は以下のようになります。
Textの位置が中央にいるのでまだもう一手間必要そうです。

親Viewのtopに位置を合わせる

親Viewの中央にTextが配置されているので、親Viewの上辺に基準を変えます。
基準の変更はframe(width:height:alignment:)のalinmentの指定でできます。
https://developer.apple.com/documentation/swiftui/view/frame(width:height:alignment:)

alignmentはViewが入っているframe内での配置基準を設定できるパラメータのようです。

struct RemoveThreePointLeaderPlayground: View {
    var body: some View {
        Text("Hello, World!")
            .fixedSize(horizontal: false, vertical: true)
            .colorInvert()
            .frame(width: 70, height: 20, alignment: .top)
            .background(Color.red)
    }
}

Textとbodyの基準をtopで合わせられたので、描画されないテキストが親View外に消えて3点リーダーがなくなりました 👏

(別のalignmentを指定して位置合わせようとしていたので結構ハマりました...)

参考にした記事

以下の記事を参考にさせていただきました。🙇‍♀️
https://qiita.com/shiz/items/0c41d20a2cb7b0748875
https://www.reddit.com/r/SwiftUI/comments/ehawu7/swiftui_text_gets_cut_off_with_in_my_view/