How to limit text to boarder inside a grid element-CodePudding

my problem is that i am trying to restrict the text i have to the current border the grid i have made has. But when the text becomes too long, the text goes outside the boarder, and it just looks ugly. is there a way to dynamically change the font size depending if it hits the border, but where it does not fill the rest of the space between the text and the border.

Here is the relevant CSS

@import url('https://fonts.googleapis.com/css2?family=Fredoka One&display=swap'); /*HEADER PRICE ETC      font-family: 'Fredoka One', cursive;*/
@import url('https://fonts.googleapis.com/css2?family=Fredoka One&family=Rajdhani&display=swap'); /*PROD DESC     font-family: 'Fredoka One', cursive;
font-family: 'Rajdhani', sans-serif; */

.container {
    display: grid;
    grid-template-columns: 18em 18em 18em;
    grid-template-rows: 18em;
    gap: 0px 4em;
    grid-auto-flow: row;
    justify-content: center;
    justify-items: start;
    grid-template-areas:
      "ClothOne ClothTwo ClothThree";
  }
  
  .ClothOne { 
      grid-area: ClothOne; 
      border: solid black 2px;
    }
  
  .ClothTwo { 
      grid-area: ClothTwo; 
      border: solid black 2px;
    }
  
  .ClothThree { 
      grid-area: ClothThree; 
      border: solid black 2px;
    }
  

/*PRODUCT STYLES*/

    .price {
        color: darkorange;
        font-size: 1em;
        margin: 0;
        font-family: 'Fredoka One', cursive;
    }

    .prodName {
        font-family: 'Fredoka One', cursive;
        margin: 0;
        font-size: 1em; 
    }

    .desc {
        font-family: 'Fredoka One', cursive;
        font-family: 'Rajdhani', sans-serif;
        font-size: 1vw;
    }

Here is my HTML doccument.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="master.css">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="ClothOne">
            <img src="../Pictures/Capture.PNG" alt="tester" width="200px">
            <p class="prodName">Rolling Dice</p>
            <p class="price">$30.5</p>
            <p class="desc">this is a basic item description of this current item</p>
        </div>
        <div class="ClothTwo">
            <img src="../Pictures/Capture.PNG" alt="tester" width="200px">
            <p class="prodName">Rolling Dice</p>
            <p class="price">$45.0</p>
            <p class="desc">Here is another item description that is slightly longer
                than the other description, and might go past the boundary
            </p>
        </div>
        <div class="ClothThree">
            <img src="../Pictures/Capture.PNG" alt="tester" width="200px">
            <p class="prodName">Rolling Dice</p>
            <p class="price">$45.0</p>
            <p class="desc">Here is the last item description which is this time
                guaranteed to go past the boundary no matter how long the item description is
                and will hopefully will not break the boarder box or make it longer than
                than what it is supposed to be.
            </p>
        </div>
    </div>
</body>
</html>

The Class that i need to change font size dynamically is the ".desc" class.

CodePudding user response：

To let the border expands when there is excess content than you can remove the grid-template-rows: 18em; so that all have equal Cloth height on excess content too and expands with it.

Add padding to the 3 Cloth so that there is space between content and container .

.container {
  display: grid;
  grid-template-columns: 18em 18em 18em;
 
  gap: 0px 4em;
  grid-auto-flow: row;
  justify-content: center;
  justify-items: start;
  grid-template-areas: "ClothOne ClothTwo ClothThree";
}

.ClothOne {
  grid-area: ClothOne;
  border: solid black 2px;
  padding: 5px;
  position:relative;
}

.ClothTwo {
  grid-area: ClothTwo;
  border: solid black 2px;
  padding: 5px;
}

.ClothThree {
  grid-area: ClothThree;
  border: solid black 2px;
  padding: 5px;
}


/*PRODUCT STYLES*/

.price {
  color: darkorange;
  font-size: 1em;
  margin: 0;
  font-family: 'Fredoka One', cursive;
}

.prodName {
  font-family: 'Fredoka One', cursive;
  margin: 0;
  font-size: 1em;
}

.desc {
  font-family: 'Fredoka One', cursive;
  font-family: 'Rajdhani', sans-serif;
  font-size: 1vw;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="master.css">
  <title>Document</title>
</head>

<body>
  <div class="container">
    <div class="ClothOne">
      <img src="../Pictures/Capture.PNG" alt="tester" width="200px">
      <p class="prodName">Rolling Dice</p>
      <p class="price">$30.5</p>
      <p class="desc">this is a basic item description of this current itemthis is a basic item description of this current itemthis is a basic item description of this current itemthis is a basic item description of this current itemthis is a basic item description of this current itemthis is a basic item description of this current itemthis is a basic item description of this current itemthis is a basic item description of this current itemthis is a basic item description of this current itemthis is a basic item description of this current itemthis is a basic item description of this current itemthis is a basic item description of this current itemthis is a basic item description of this current itemthis is a basic item description of this current item</p>
    </div>
    <div class="ClothTwo">
      <img src="../Pictures/Capture.PNG" alt="tester" width="200px">
      <p class="prodName">Rolling Dice</p>
      <p class="price">$45.0</p>
      <p class="desc">Here is another item description that is slightly longer than the other description, and might go past the boundary
      </p>
    </div>
    <div class="ClothThree">
      <img src="../Pictures/Capture.PNG" alt="tester" width="200px">
      <p class="prodName">Rolling Dice</p>
      <p class="price">$45.0</p>
      <p class="desc">Here is the last item description which is this time guaranteed to go past the boundary no matter how long the item description is and will hopefully will not break the boarder box or make it longer than than what it is supposed to be.
      </p>
    </div>
  </div>
</body>

</html>