Forum Discussion

Leonard_Tan's avatar
Leonard_Tan
Copper Contributor
Jun 30, 2021

SharePoint List Gallery View Formatting - How do I wrap text?

Hi experts,

I was looking at this FAQ for solutions but I don't seem to be able to get solve it. Basically, I want to do a text wrap into something like this.



So I tried with similar steps but the result is still the same.

Hope someone can provide some guidance or tutorial resources on this. Thank you very much.
@ganeshsanap

  • Leonard_Tan Don't remove sp-card-content class from all column components. Just remove it from Description, where you want to apply text wrap.

     

    If you have done the above & still it is not showing other columns, check if those columns are pushed out of card. In this case, you have to increase the height of top div element in JSON.

     

    Also, if the description text length is variable, consider truncating the text because if the text is longer, it will start pushing other columns below & then out of card --> This is what I mentioned in "Note" in my previous post (handling overflow of text).


    Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.

  • Leonard_Tan Remove sp-card-content class under attributes property of a elmType for [$Title] block.

     

    Note: If you remove above class, you have to manage the overall height of card & overflow of title text.


    Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.

    • Leonard_Tan's avatar
      Leonard_Tan
      Copper Contributor

      ganeshsanapMany thanks for helping out on the coding tweak, I really appreciate it. I tried editing the part by removing the [spclass] and tweaking a little further and I'm not sure this causes an issue as the card can now only display one component. Is there something I need to look at in order to get every to display out?

       

      • ganeshsanap's avatar
        ganeshsanap
        MVP

        Leonard_Tan Don't remove sp-card-content class from all column components. Just remove it from Description, where you want to apply text wrap.

         

        If you have done the above & still it is not showing other columns, check if those columns are pushed out of card. In this case, you have to increase the height of top div element in JSON.

         

        Also, if the description text length is variable, consider truncating the text because if the text is longer, it will start pushing other columns below & then out of card --> This is what I mentioned in "Note" in my previous post (handling overflow of text).


        Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.

    • Yet_Another_Dave's avatar
      Yet_Another_Dave
      Copper Contributor
      This is the only place on the internet with the right answer... thanks!

      If you have already spent time looking at the different "wrap" options for "style", but you still can't get it to work, read ganeshsanap 's answer again. Like me, you probably have a [$Title] block. Right underneath where you've been trying to modify the styles, in the "attributes" section, there is an attribute called "class" that likely has "sp-card-content" in it.

Resources