cut the text length as the screen gets smaller : I want the text length to shrink when the screen gets smaller 

    `<div class="dress-card hvr-bob">
              <div class="dress-card-head">
                <img class="dress-card-img-top" src="img/rdr2.jpg" alt="">
              </div>
              <div class="dress-card-body">
                <h2 class="dress-card-title">Red Dead Redemption 2</h2>
                <p class="dress-card-para">Social Club Key</p>
                <p class="dress-card-para"><span class="dress-card-price">200TL &ensp;</span><!--<span class="dress-card-crossed">300TL</span><span class="dress-card-off">&ensp;İndirim!</span>--></p>
                <div class="row">
                  <div class="col-md-6 card-button"><a style="text-decoration: none;" href=""><div class="card-button-inner bag-button"><i class="fas fa-shopping-cart"></i> Satın Al</div></a></div>
                  <div class="col-md-6 card-button"><a style="text-decoration: none;" href=""><div class="card-button-inner wish-button"><i class="fas fa-shopping-basket"></i> Sepete Ekle</div></a></div>
                </div>
              </div>
            </div>
          </div>`


help