Question

我想确保div容器将文本保存在其中，而不会在外部泄漏任何文本。如何根据动态文本使其响应以增大或缩小容器大小？

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

Answer 1

去世检查此https://jsfiddle.net/kdrbh1Lw/10/ 将此CSS规则添加到元素类。

弹性包裹：包裹 高度：自动 宽度：最大内容

动态添加新数据元素容器时，应在垂直和水平方向上进行扩展。

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

Answer 2

如评论中所述，您的问题在于文本是自动换行，因为您为其父容器设置了120px的设置宽度。如果您A）放弃宽度或B）给其min-width为120px，则可以调整它的大小以容纳更长的名称。

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

Answer 3

以下内容如何。使用min-width，您可以指定它肯定应该具有的宽度，但是它可以根据需要增大。如果您不喜欢，也可以设置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>

如何根据容器大小制作动态文本

3 个答案: