[Jetpack Compose] Text가 너무 길어서 공간을 벗어날 때 텍스트를 자르고 "..." 넣기

간단하게 Card로 구현한 예시입니다. 

 

Card(
    modifier = Modifier
        .fillMaxWidth()
        .padding(4.dp)
) {
    Row(
        modifier = Modifier.padding(18.dp)
            .fillMaxWidth(),
        horizontalArrangement = Arrangement.SpaceBetween,
    ) {
        Text(
            text = "안녕하세요",
        )
    }
}

 

정상적인 Card 모습

현재 상태에서는 아무런 문제가 없지만 text의 양이 길어지면 문제가 발생합니다.

 

text가 넘칠 경우 Card 모습

 

위 문제는 간단하게 Text의 매개변수인 maxLines와 overflow 설정해 주면 됩니다.

 

Card(
    modifier = Modifier
        .fillMaxWidth()
        .padding(4.dp)
) {

    Row(
        modifier = Modifier.padding(18.dp)
            .fillMaxWidth(),
        horizontalArrangement = Arrangement.SpaceBetween,
    ) {
        Text(
            text = "안녕하세요안녕하세요안녕하세요안녕하세요안녕하안녕하세요안녕하세요안녕하세요안녕하세요안녕하세요안녕하세요안녕하세요안녕하세요안녕하안녕하세요안녕하세요안녕하세요안녕하세요안녕하세요안녕하세요",
            maxLines = 1,                        // 최대 라인 설정
            overflow = TextOverflow.Ellipsis,    // text 넘칠 경우 "..." 표시 
        )
    }
}

 

수정 후 Card 모습

 

 

추가적으로 Text 옆에 좋아요 수를 넣어주고 싶어서 Text 밑에 Text를 하나 더 추가해 주었습니다.

 

Card(
    modifier = Modifier
        .fillMaxWidth()
        .padding(4.dp)
) {
    Row(
        modifier = Modifier.padding(18.dp)
            .fillMaxWidth(),
        horizontalArrangement = Arrangement.SpaceBetween,
    ) {
        Text(
            text = "안녕하세요안녕하세요안녕하세요안녕하세요안녕하안녕하세요안녕하세요안녕하세요안녕하세요안녕하세요안녕하세요안녕하세요안녕하세요안녕하안녕하세요안녕하세요안녕하세요안녕하세요안녕하세요안녕하세요",
            maxLines = 1,
            overflow = TextOverflow.Ellipsis,
        )
        
        Text(
            text = "192",
        )
    }
}

 

Text를 추가해준 뒤 Card 모습

다음과 같이 Card의 크기가 커지고 좋아요 수가 제대로 나타나지 않는 문제가 발생합니다.

이 문제 또한 weight 설정으로 간단하게 해결할 수 있습니다.

 

Card(
    modifier = Modifier
        .fillMaxWidth()
        .padding(4.dp)
) {
    Row(
        modifier = Modifier.padding(18.dp)
            .fillMaxWidth(),
        horizontalArrangement = Arrangement.SpaceBetween,
    ) {
        Text(
            text = "안녕하세요안녕하세요안녕하세요안녕하세요안녕하안녕하세요안녕하세요안녕하세요안녕하세요안녕하세요안녕하세요안녕하세요안녕하세요안녕하안녕하세요안녕하세요안녕하세요안녕하세요안녕하세요안녕하세요",
            maxLines = 1,
            overflow = TextOverflow.Ellipsis,
            modifier = Modifier.weight(1f)    // 행의 다른 형제 요소에 상대적인 가중치 1로 설정
        )
        
        Text(
            text = "192",
        )
    }
}

 

수정된 Card 모습