How to make a dynamic text responsive to the container size

Question

I want to make sure that the div container holds the text inside it without leaking any text outside. How can I make it responsive to grow or shrink the container size depending upon the dynamic text?

.element {
  display: inline-block;
  text-indent: 15px;
  background-color: #0074d9;
  width: 120px;
  margin-right: 5px;
  /* left and right margin of flex elements inside this element container */
  margin-left: 5px;
  animation: roll 3s infinite;
  transform: rotate(30deg);
  opacity: .5;
}

@keyframes roll {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

<div class="element">
  <p>Welcome!</p>
  <p>${user_name}</p>
  <p>${user_email}</p>
  <p>${user_contact} </p>
</div>

Can you share a visual example of what effect you're trying to achieve? — Geuis, Aug 28 '18 at 18:47
@Geuis ! the user_name variable could be anything assume it is "rory mcCrossan" but when displaying the name it doesnot fit inside the container the text goes out of the box/container! my question is how to make the box/container grow or shrink depending upon the dynamic text! — faize, Aug 28 '18 at 18:52
because you setted a fixed width (120px), try without setting a width — Calvin Nunes, Aug 28 '18 at 18:53
Possible duplicate. Think you are looking for something like [this](https://stackoverflow.com/questions/450903/how-to-make-div-not-larger-than-its-contents?rq=1) — Schere, Aug 28 '18 at 18:56

Nadee · Answer 1 · 2018-08-28T19:36:01.390

faize check this https://jsfiddle.net/kdrbh1Lw/10/ add this css rules to element class.

flex-wrap: wrap height: auto width: max-content

when dynamically adding new data element container should expand both vertically and horizontally.

.element {
    flex-wrap: wrap;
    text-indent: 15px;
    background-color: #0074d9;
    height: auto;
    width: max-content;
    margin-right: 5px; 
    margin-left: 5px;
    animation: roll 3s infinite;
    transform: rotate(30deg);
    opacity: .5;
  }

  @keyframes roll {
    0% {
      transform: rotate(0);
    }
    100% {
      transform: rotate(360deg);
    }
  }

<!DOCTYPE html>
<html>
<head>
 <title></title>
</head>
<body>
 <div class="element">
  <p>welcome</p>
  <p>${user_name}</p>
  <p>${user_email}</p>
  <p>${user_contact}</p>
    <p>${new_data}</p>
    <p>long long long long long long text</p>
 </div>
</body>
</html>

code works fine if the width is also set to auto! like susggested by calvin and super dj thanks for the help! appreciate everyone for helping me out on this!! — faize, Aug 28 '18 at 19:28
@faize you can set width to max-content. then it expand horizontally too. — Nadee, Aug 28 '18 at 19:29

score 1 · Accepted Answer · answered Aug 28 '18 at 19:04

As mentioned in the comments, your problem here is that the text is wrapping because you gave its parent container a set width of 120px. If you A) ditch the width or B) give it a min-width of 120px, you will get it to resize to accommodate longer names.

.element {
  display: inline-block;
  background-color: #0074d9;
  min-width: 120px;
  margin-right: 5px;
  margin-left: 5px;
  padding: 0 10px;
  animation: roll 3s infinite;
  transform: rotate(30deg);
  opacity: .5;
}

@keyframes roll {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

<div class="element">
  <p>Welcome!</p>
  <p>Someguy Longlastname</p>
  <p>${user_email}</p>
  <p>${user_contact} </p>
</div>

score 1 · Answer 3 · answered Aug 28 '18 at 19:04

How about the following. Using min-width you can specify a width it should definitely have but it can grow as much as it wants. If you don't like that you could also set a max-width.

.element {
  display: inline-block;
  padding: 15px; /* gives equal spacing around */
  background-color: #0074d9;
  min-width: 120px;
  margin-right: 5px;
  /* left and right margin of flex elements inside this element container */
  margin-left: 5px;
  animation: roll 3s infinite;
  transform: rotate(30deg);
  opacity: .5;
}

.element p {
  margin: 0 0 10px 0;
}

.element p:last-of-type {
  margin: 0;
}

@keyframes roll {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

<div class="element">
  <p>Welcome!</p>
  <p>${user_name}</p>
  <p>${user_email}</p>
  <p>${user_contact} </p>
  <p>rory mcCrossan</p>
</div>

How to make a dynamic text responsive to the container size

3 Answers3