如何使用 css 一一显示 div

Question

我们正在开发那个聊天的聊天应用，有多少内容就有多少宽度，我们要一个一个单独显示。而且聊天时长很大，多行显示聊天内容。

我们正在显示内容，有多少内容具有如此大的宽度 div 显示但并排 div 即将到来。我们想逐步显示如何 do.and 如果内容长度很长然后显示为多行。

.right {
  position: relative;
  background: white;
  text-align: right;
  padding: 10px 15px;
  border-radius: 6px;
  border: 1px solid #ccc;
  float: right;
  right: 20px;
}

.right::before {
  content: '';
  position: absolute;
  visibility: visible;
  top: -1px;
  right: -10px;
  border: 10px solid transparent;
  border-top: 10px solid #ccc;
}

.right::after {
  content: '';
  position: absolute;
  visibility: visible;
  top: 0px;
  right: -8px;
  border: 10px solid transparent;
  border-top: 10px solid white;
  clear: both;
}

<div>
<div class="right">
  <span>thanks</span>
</div>

<div class="right">
  <span>thanks</span>
</div>

</div>

<div>
<div class="right">
  <span>thanksthanksthanksthanksthanksthanksthanksthanksthanksthanksthanksthanksthanksthanksthanksthanksthanksthanksthanksthanksthanks</span>
</div>



</div>

Answer 1

例如，您必须使用 overflow: hidden; 清除右侧浮动。

<div class="clear">
  <div class="right">
    <span>thanks</span>
  </div>
</div>
<div class="clear">
  <div class="right">
    <span>thanks</span>
  </div>
</div>
<div class="clear">
  <div class="right">
    <span>thregre gerg ergr geg reger ger gergregeg erger gerg erg erg ergergerger ge anks</span>
  </div>
</div>

CSS

.clear { overflow: hidden; margin-bottom: 10px;}

Fiddle

Answer 2

您可以使用word-break:break-all（或normal|break-all|keep-all）在任意两个字母之间打断单词。并使用 clear 属性控制浮动元素的行为。

.right {
  position: relative;
  background: white;
  text-align: right;
  padding: 10px 15px;
  border-radius: 6px;
  border: 1px solid #ccc;
  float: right;
  right: 20px;
}
.right span{
  word-break: break-all;
}
.fix{
  clear:both;
  
}

.right::before {
  content: '';
  position: absolute;
  visibility: visible;
  top: -1px;
  right: -10px;
  border: 10px solid transparent;
  border-top: 10px solid #ccc;
}

.right::after {
  content: '';
  position: absolute;
  visibility: visible;
  top: 0px;
  right: -8px;
  border: 10px solid transparent;
  border-top: 10px solid white;
  clear: both;
}

<div class="fix">
<div class="right">
  <span>thanks</span>
</div>
  </div>
<div class="fix">

<div class="right">
  <span>thanks</span>
</div>
  </div>
  <div class="fix">
<div class="right">
  <span>thanksthanksthanksthanksthanksthanksthanksthanksthanksthanksthanksthanksthanksthanksthanksthanksthanksthanksthanksthanksthanks</span>
</div>
  </div>

如何使用 css 一一显示 div

how to display div one by one using css

html

css

chat