为什么文字超出了我的讲话泡泡？

Question

我已经建立了一个基本的聊天程序。

每次用户发送消息时，消息都会显示为语音气泡。然而，问题在于，如果用户写长文本，则气泡的高度不会扩大。相反，文字不在泡沫之内。

    .blue {
      font-size: 1.2em;
      margin-top: 12px;
      position: relative;
      background-color: #31abb2;
      text-align: left;
      height: auto;
      padding: 6px;
      max-width: 50%;
      border-radius: 5px;
      right: 20px;
      display: block;
      float: right;
      clear: both;
    }

    .blue:after {
      content: '';
      width: 0;
      height: 0;
      border-top: 5px solid transparent;
      border-bottom: 5px solid transparent;
      border-right: 10px solid transparent;
      border-left: 10px solid #31abb2;
      position: absolute;
      top: 5px;
      right: -20px;
    }

.chat {
      height: 100%;
      overflow: auto;
    }

气泡加入了这个：

<div data-role="main" id="columnForChatWindow">
        <div class="chat" id="chat">
           <!--Messages and updates are displayed here-->
          </div>
      </div>

Answer 1

以下将解决这个问题：

  white-space: normal;
  word-wrap: break-word;

自动换行属性允许长字被打破并换行到下一行。

.blue {
  font-size: 1.2em;
  margin-top: 12px;
  position: relative;
  background-color: #31abb2;
  text-align: left;
  height: auto;
  padding: 6px;
  max-width: 50%;
  border-radius: 5px;
  overflow: hidden;
  right: 20px;
  display: block;
  float: right;
  clear: both;
  white-space: normal;
  word-wrap: break-word;
}

.blue:after {
  content: '';
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 10px solid transparent;
  border-left: 10px solid #31abb2;
  position: absolute;
  top: 5px;
  right: -20px;
}

<span class="blue">21321123</span>

<span class="blue">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</span>



<span class="blue">12312312312312312123123123123123121231231231231231212312312312312312123123123123123121231231231231231212312312312312312</span>