Wrap text to next line using Jetpack Compose

Question

I've created a constraint layout

 ConstraintLayout(
        Modifier
            .fillMaxWidth()
            .wrapContentHeight()
    ) {

        Image(
            painter = rememberImagePainter(it.photoUrl.toString()),
            modifier = Modifier
                .constrainAs(photo) {
                    start.linkTo(parent.start, margin = 30.dp)
                    top.linkTo(parent.top, margin = 30.dp)
                }
                .width(130.dp)
        )

        Column(
            modifier = Modifier
                .constrainAs(holder) {
                    start.linkTo(photo.end, margin = 30.dp)
                    top.linkTo(photo.top)
                    bottom.linkTo(photo.bottom)
                    end.linkTo(parent.end, margin = 30.dp)
                }
                .fillMaxWidth()
                .wrapContentHeight(),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text(
                modifier = Modifier
                    .wrapContentWidth()
                    .wrapContentHeight(),
                text = "Lorem Ipsu auto text  ator..."
            )
}

As you can see long text can not fit in layout. How Can I wrap text to next line? I tried to change wrapContentWidht() to fillMaxParentWidth but id didn't help.

Answer 1

You can use width = Dimension.fillToConstraints to limit the width to the available space.

within the constrainAs block

In your example:

.constrainAs(holder) {
   start.linkTo(photo.end, margin = 30.dp)
   top.linkTo(photo.top)
   bottom.linkTo(photo.bottom)
   end.linkTo(parent.end, margin = 30.dp)
   width = Dimension.fillToConstraints
}