1

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

我怎样才能让它响应？

目前看起来像：
我的讲话泡泡

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

4

1 回答 1

0

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

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

于 2018-06-24T05:33:57.703 回答