如何将文本限制在网格元素内的边框答案

【问题标题】：How to limit text to boarder inside a grid element如何将文本限制在网格元素内的边框
【发布时间】：2021-10-03 19:38:06
【问题描述】：

我的问题是我试图将我拥有的文本限制为我制作的网格的当前边框。但是当文本变得太长时，文本会超出边界，看起来很难看。有没有办法根据字体是否碰到边框来动态更改字体大小，但它不会填充文本和边框之间的其余空间。

这里是相关的 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;
    }

这是我的 HTML 文档。

<!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>

我需要动态改变字体大小的类是“.desc”类。

【问题讨论】：

标签： html css css-grid

【解决方案1】：

要让border 在内容过多时展开，您可以删除grid-template-rows: 18em;，这样所有多余内容上的布料高度也相同并随之展开。

将padding 添加到 3 Cloth 中，以便在内容和容器之间留出空间。

.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>

【讨论】：

我做了你发布的更改，这就是目前出现的imgur.com/a/3Py0wyf
听起来，在你转发后发表另一条评论 :=)
啊，你让边框的大小变得更大，文本越长。它会起作用的:)。但是有没有办法让文本的大小而不是边框动态变化？
你已经使用了font-size（以vw为单位），它会随着屏幕尺寸动态变化。因此，在较小的屏幕上将其设置得太小会给用户带来不好的体验。 @RoaldAndreKvarv
啊，那么你的解决方案对我来说更有意义。谢谢您的帮助。我会让你提交的正确答案:)