[SwiftUI] Text의 lineBreakMode를 byCharWrapping으로 하고 싶다면

SwiftUI의 lineBreakMode에 대해 생각해 볼 점.

SwiftUI의 Text는 기본적으로 lineBreakMode가 byWordWrapping인 것처럼 보임.

 

하지만 SwiftUI의 lineBreak 규칙을 100% 믿으면 안 될 수도 있음.

가끔 byWordWrapping이라고 하기엔 이해되지 않는(?) 줄 바꿈도 보이는데.

예를 들어 아래와 같은 코드에서

"주변에 유기견을 보호하고"까지 작성하면 한 줄로 표시가 되다가,

struct LineBreakTest: View {
    var body: some View {
        Text("주변에 유기견을 보호하고")
            .textStyle(style: .B30, color: .hex000000)
            .padding()
    }
}

#Preview {
    LineBreakTest()
}

 

String에 " 있어요"를 추가하면,

아래처럼 "보호하고"가 아랫줄로 내려가는 현상이 생김.

(SwiftUI의 Text는 byWordWrapping이면서 '알잘딱깔센'으로 줄 바꿈을 시켜주는걸까🫠)

 

만약 기획자의 의도가 "주변에 유기견을 보호하고/n있어요" 였다면 명시적으로 줄바꿈을 해주어야 함.

 

만약 기획자의 의도가 byWordWrapping이 아닌 byCharWrapping 줄바꿈이었다면?

 

시도: UILabel을 UIRepresentable로 감싸서 lineBreakMode를 적용해볼까 했는데, 해당 View 크기를 SwiftUI가 잘 커버해주지 않는 듯해서 실패.

 

찾아낸 방법: String에 ZWS(Zero Width Space)를 추가.

ZWS는 유니코드의 U+200B에 해당하는 Charactor. 이름 그대로 너비가 없는 공백문자의 역할.

편의를 위해 extension으로 구현해놓고,

extension String {
    var forceCharWrapping: Self {
        self.map({ String($0) }).joined(separator: "\u{200B}") // 200B: 가로폭 없는 공백문자
    }
}

 

Text를 그릴 때, String에 적용해주면 byCharWrapping으로 lineBreakMode를 적용한 것처럼 그려줄 수 있음.