Мы разрабатываем приложение чата в этом чате, какой объем контента будет иметь такую ширину, которую мы хотим отображать отдельно один за другим. а также длительность чата большая отображение содержимого чата в многострочном формате.

Мы отображаем контент и то, сколько контента имеет такой размер отображаемого 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>

enter image description here

1
VK Chikkadamalla 22 Апр 2016 в 12:51

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>
1
manukn 22 Апр 2016 в 10:19

Например, вы должны очистить правый поплавок с помощью 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;}

Скрипка

2
Vincent G 22 Апр 2016 в 10:19