如何使用css

Question

我们正在开发聊天应用程序，在那个聊天中，我们希望逐个单独显示多少内容。并且聊天长度是多行聊天内容的大显示。

我们正在显示内容以及有多少内容具有如此大小的宽度div显示但并排div即将来临。我们想逐步显示如何做。如果内容长度很长，那么显示到多行。

.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（或普通| 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>