CODEWITHSUNDEEP
javascriptjqueryhtmlcss
faize
faize

Reputation: 59

How to make a dynamic text responsive to the container size

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>

Upvotes: 0

Views: 1194

Answers (3)

Nadee
Nadee

Reputation: 342

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>

Upvotes: 2

SuperDJ
SuperDJ

Reputation: 7661

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>

Upvotes: 1

justDan
justDan

Reputation: 2335

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>

Upvotes: 1

Related Questions