重新排列长字符串并用较短的字符串替换

Question

我正在创建一个用户可以输入随机评论的页面，它应该显示以下评论。 （见下文） 我遇到的问题是我想让所有的框都适合页面。例如，较长的字符串应移动到新行并替换为较短的字符串等。

目前我在测试时将每个输出都设为<span>。 任何帮助将不胜感激！

Answer 1

您可以使用white-space: nowrap;。

演示：

div {
  display: inline-block;
  white-space: nowrap;
  margin: 5px;
  padding: 5px 10px;
  border-radius: 3px;
  border: 1px solid #333;
}

<div>
  Content goes here.
</div>
<div>
  Content goes here.
</div>
<div>
  Content goes here. Content goes here. Content goes here.
</div>
<div>
  Content goes here.
</div>

至于重新排序元素以填补空白，您可能需要JavaScript。

Answer 2

您可以使用CSS执行此操作，使用display条件来简化。

.classname {display:inline-block;}

如果您希望每个元素代替整行，也可以使用block。

.classname {display:block;}

Answer 3

我认为你应该让每个div持有评论显示：阻止，然后设置 maxi-width：100％。我认为它应该工作正常。 注意：这可能是评论，但我不能这会为文本留出足够的空间，如果文字超过div，则会出现一个新行。