How can i get my bootstrap 5 card-body in one line so I can horizontally scroll?

I'm currenty creating cards with bootstrap 5. I was successfully able to get an image on top, and card body rendering right underneath it. Some of my card title's were longer than others, and I wanted all my card's body to be the same height. I added class 'text-truncate' and was able to truncate long strings of text with ellipsis. I wanted to add a horizontal scroll so that I can just scroll through the long strings rather than have ellipsis on it.

This is my current code for my cards

<div className="row p-5 m-2">
            {userShows.map((userShow) => {
              return (
                <div className="col-sm " key={userShow.show.id}>
                  <div className="card" style={{ width: 17 + "rem" }}>
                    <img
                      src={userShow.show.images[1].url}
                      alt="podcastimg"
                      className="card-img-top"
                    />
                    <div className="card-body ">
                      <h5
                        style={{ textAlign: "center" }}
                        className="card-title text-truncate overflow-scroll"
                      >
                        <Link
                          to={`/show/${userShow.show.id}`}
                          className="stretched-link"
                        >
                          <span style={{ fontWeight: "bold", color: "white" }}>
                            {userShow.show.name}
                          </span>
                        </Link>
                      </h5>
                      <span className="card-text">
                        <h6
                          style={{
                            textAlign: "center",
                            fontSize: "14px",
                            fontWeight: 400,
                            color: "white",
                          }}
                        >
                          {" "}
                          {userShow.show.publisher}
                        </h6>
                      </span>
                    </div>
                  </div>
                </div>
              );
            })}
 </div>

When I add both classes 'text-truncate' and 'overflow-scroll' this is how my cards look:

I'm able to scroll, but the full text isn't there.

When I delete class 'text-trucate', the horizontal scroll obviously does not work since the full card-text is being rendered:

I was unable to find any docs on how to make my card body (card-title and card-text) in one line where I can horizontally scroll instead of using class 'text-trucate'

Does anyone know how I can achieve this? Any tips will be greatly appreciated, thanks in advance!