响应式 CSS 语音气泡答案

【问题标题】：Responsive CSS Speech Bubble响应式 CSS 语音气泡
【发布时间】：2015-11-10 20:02:36
【问题描述】：

我创建了以下气泡，以向网站上的人们展示有用的提示。它可以工作，但没有响应，并且较长的 cmets 会在某些移动设备上从屏幕右侧溢出。

我怎样才能让它响应？

目前看起来像：

.bubble .bubble-avatar {
  float: left;
  margin-left: -125px;
  margin-top: -15px;
  font-size: 75px;
}
.bubble {
  position: relative;
  width: 250px;
  height: auto;
  min-height: 50px;
  padding: 1.5em;
  background: #FFFFFF;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  border: #000000 solid 3px;
  margin-left: 80px;
}
.bubble:after {
  content: '';
  position: absolute;
  border-style: solid;
  border-width: 15px 15px 15px 0;
  border-color: transparent #FFFFFF;
  display: block;
  width: 0;
  z-index: 1;
  left: -15px;
  top: 33px;
}
.bubble:before {
  font-size: 10em;
  content: '';
  position: absolute;
  border-style: solid;
  border-width: 17px 17px 17px 0;
  border-color: transparent #000000;
  display: block;
  width: 0;
  z-index: 0;
  left: -20px;
  top: 31px;
}

<div class="bubble"><i class="pw-icon-user-outline bubble-avatar"></i>
  Sorry, I feel you should stop what you are doing and have some nachos! Go on...
</div>

【问题讨论】：

您可以使用 Bootstrap，它有一个名为 ToolTip 的功能，可以满足您的需求。可能仅针对单个功能就过分了，但是如果您不想弄乱 CSS，Bootstrap 可以通过大量预设的布局来选择它。
我想过这个问题，但我希望在网站上实现这种类型的外观和感觉。

标签： html css responsive-design infobubble

【解决方案1】：

您可以使用overflow-wrap: break-word;

CSS 中的overflow-wrap 属性允许您指定浏览器可以将目标元素内的一行文本拆分为多行，否则无法拆分。这有助于避免异常长的文本字符串因溢出而导致布局问题。

【讨论】：