Text exceeding maximum height and width of the container

Related searches

desktop:

mobile devices:

Hello I have a problem my text is passing my maximum height I would like my container to follow the height and that my text has maximum width of my container my text

code:

<div className="App">
  <div class="wrapper">
    <div className="text">
      <div class="card-info">
        <div class="card-about">
          <a class="card-tag tag-news">NEWS</a>
          <div class="card-time">6/11/2018</div>
        </div>
      </div>
      <h3 className="textxd">dasssssssssssssssss</h3>
      <p className="textxd">
        aaaaaaaaaaaaa dasuhdasudhu dasuhduashu aaaaaaaaaaaaa dasuhdasudhu
        dasuhduashu aaaaaaaaaaaaa da aaaaaaaaaaaaa dasuhdasudhu dasuhduashu
        aaaaaaaaaaaaa dasuhdasudhu dasuhduashu aaaaaaaaaaaaa dasuhdasudhu
        dasuhduashu aaaaaaaaaaaaa dasuhdasudhu dasuhduashusuhdasudhu
        dasuhduashu aaaaaaaaaaaaa dasuhdasudhu dasuhduashu
      </p>
    </div>
  </div>
</div>

css:

.App {
  padding: 20px;
  font-family: sans-serif;
  text-align: center;
  background: red;
  height: 40vh;
}


.wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 30vh;
  max-height: 30vh;
  border-radius: 10px;
  cursor: pointer;
  background:blue;

}
.textxd {
  margin-top: 10px;
  margin-bottom: 5px;
}
.text {
  height: 100%;
  max-height: 30vh;
  padding: 0.15rem 1.25rem;
  color: white;
  transition: all 0.3s ease-in;
  ${({ isHover }) =>
    isHover &&
    `
  color:black;
  transition: all 0.3s ease-in;
   `}
}
.card-about {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 0;
}
.card-tag {
  width: 60px;
  max-width: 100px;
  padding: 0.2rem 0.5rem;
  font-size: 12px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  background: #ffab00;
  color: #fff;
}
.card-info {
  position: relative;
}

I do not know how I could solve this I would need to leave my container and responsive text that my container follows the height of the text or that the text has a maximum height


If you want the class wrapper with the same height, then use overflow: scroll. like this -->

.wrapper { ...  overflow : scroll; }

OR Else use height : auto;

.wrapper { ...  height : auto;   }

CSS max-height property, The max-height property defines the maximum height of an element. If the content is larger than the maximum height, it will overflow. How the container will handle� If you set type with vw (viewport width) units, you can find an exact number where the text pretty closely fits the container and doesn’t break as you resize. I’d call this a magic number . In this case, font-size: 25.5vw; works down to a 320px viewport, but still will break much lower than that.


Just set height auto on mobile devices like this

@media only screen and (max-width: 600px) {
 .wrapper {
  height: auto;
  max-height: auto;    
 }
}

Min and Max Width/Height in CSS, Oftentimes, we want to limit the width of an element relative to its parent, and at In this article, we will go through the maximum and minimum CSS properties for width and height, and to The text might range from one word to multiple. By using max-width: 100% , the width of the image won't exceed the� The max-width property defines the maximum width of an element. If the content is larger than the maximum width, it will automatically change the height of the element. If the content is smaller than the maximum width, the max-width property has no effect. Note: This prevents the value of the width property from becoming larger than max-width.


try This.added max-width to your div .class attribute was also given wrong as className

.App {
  padding: 20px;
  font-family: sans-serif;
  text-align: center;
  background: red;
 
}


.wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  
  
  border-radius: 10px;
  cursor: pointer;
  background:blue;

}
.textxd {
  margin-top: 10px;
  margin-bottom: 5px;
}
.text {
 height:auto;
  max-width:100px;
 
  padding: 0.15rem 1.25rem;
  color: white;
  transition: all 0.3s ease-in;
  ${({ isHover }) =>
    isHover &&
    `
  color:black;
  transition: all 0.3s ease-in;
   `}
}
.card-about {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 0;
}
.card-tag {
  width: 60px;
  max-width: 100px;
  padding: 0.2rem 0.5rem;
  font-size: 12px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  background: #ffab00;
  color: #fff;
}
.card-info {
  position: relative;
}
<div class="App">
  <div class="wrapper">
    <div class="text">
      <div class="card-info">
        <div class="card-about">
          <a class="card-tag tag-news">NEWS</a>
          <div class="card-time">6/11/2018</div>
        </div>
      </div>
      <h3 className="textxd">dasssssssssssssssss</h3>
      <p className="textxd">
        aaaaaaaaaaaaa dasuhdasudhu dasuhduashu aaaaaaaaaaaaa dasuhdasudhu
        dasuhduashu aaaaaaaaaaaaa da aaaaaaaaaaaaa dasuhdasudhu dasuhduashu
        aaaaaaaaaaaaa dasuhdasudhu dasuhduashu aaaaaaaaaaaaa dasuhdasudhu
        dasuhduashu aaaaaaaaaaaaa dasuhdasudhu dasuhduashusuhdasudhu
        dasuhduashu aaaaaaaaaaaaa dasuhdasudhu dasuhduashu
      </p>
    </div>
  </div>
</div>

11.3 Line height calculations, This property can be applied to text elements, but it is most useful with replaced elements such as images. Negative If the 'width' and 'height' of a replaced element are both 'auto', these properties will be set to the intrinsic dimensions of the element. 11.1.4 Minimum and maximum widths: 'min-width' and 'max-width'. It shouldn’t merely be your design that dictates the width of your text, it should also be a matter of legibility. The optimal line length for your body text is considered to be 50-60 characters per line, including spaces (“Typographie”, E. Ruder).


'min-width' and 'max-width', For continuous media, it has the dimensions of the viewport and is anchored at the id="body"> <DIV id="div1"> <P id="p1">This is text in the first paragraph. Take the max-width and max-height as max(min, max) so that min ≤ max holds true. Paragraphs of which the height of the contents exceeds 100 pixels will� We could use the width of the browser window in our CSS math. The amount we want to “pull” to the left and right is half the width of the browser window plus half the width of the parent. (Assuming the parent is centered.) So, so our parent is 500px wide:


Handling Long and Unexpected Content in CSS, Now we can be sure that it won't break if the text gets longer. Determining width and height might make the UI break when the tag content is� The function can also be used as laid out box size for width, height, min-width, min-height, max-width and max-height, where the maximum and minimum sizes refer to the content size. Syntax The fit-content() function accepts a <length> or a <percentage> as an argument.


Similarly, the height property specifies the height of an element's content area. Both width and height can take the following values: auto (default value) React Native calculates the width/height for the element based on its content, whether that is other children, text, or an image. pixels Defines the width/height in absolute pixels