html - 为什么文字超出了我的对话泡泡？

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;

word-wrap 属性允许将长单词打断并换行到下一行。

.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>