如果没有更多空格，则将文本换行到下一行

Question

将鼠标悬停在标题旁边的信息图标上时，我会获得此工具提示。如果没有足够的空间来显示所有内容，则无法将其换行到下一行。我已经尝试了很多不同版本的空格和换行符，但我的想法已经用完了。

在该IE之上，根本不显示全角。我不想给我的div固定宽度。我希望它在父级中没有更多空间时动态地换行。

我期望的结果将是IE和Chrome中的类似结果

.info-tooltip {
  position: relative;
  display: inline;
  top: 1px;
  cursor: default;
  white-space: pre;
}

.info-tooltip:before {
  content: url("https://image.flaticon.com/icons/svg/685/685815.svg");
  width: 20px;
  height: 20px;
  display: inline-block;
}

/* Tooltip text */
.info-tooltip .info-tooltip-text {
  visibility: hidden;
  background-color: #0BC6DD;
  color: #fff;
  border-radius: 4px;
  font-size: 14px;

  /* Position the tooltip text */
  position: absolute;
  top: 37px;
  left: -50px;
  display: table;
  z-index: 1;
  padding: 8px 8px 4px 8px ;

  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
  -webkit-transition: opacity 0.3s;
  -moz-transition: opacity 0.3s;
  -ms-transition: opacity 0.3s;
  -o-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

/* Tooltip arrow */
.info-tooltip .info-tooltip-text::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 60px;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #0BC6DD transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.info-tooltip:hover .info-tooltip-text {
  visibility: visible;
  opacity: 1;
}

.info-tooltip .info-tooltip-text p {
  padding-bottom: 4px;
  margin: 0;
  font-weight: 100;
}

<h1>There is a tooltip next to me <i class="info-tooltip"/>
  <div class="info-tooltip-text">
    <p>This is the actual tooltip to be displayed. A bit longer than expected. Should wrap where necessary.</p>
  </div>
</i></h1>

Answer 1

已添加

width: 250px;
white-space: normal;

到.info-tooltip .info-tooltip-text p

.info-tooltip {
  position: relative;
  display: inline;
  top: 1px;
  cursor: default;
  white-space: pre;
}

.info-tooltip:before {
  content: url("https://image.flaticon.com/icons/svg/685/685815.svg");
  width: 20px;
  height: 20px;
  display: inline-block;
}


/* Tooltip text */

.info-tooltip .info-tooltip-text {
  visibility: hidden;
  background-color: #0BC6DD;
  color: #fff;
  border-radius: 4px;
  font-size: 14px;
  /* Position the tooltip text */
  position: absolute;
  top: 37px;
  left: -50px;
  display: table;
  z-index: 1;
  padding: 8px 8px 4px 8px;
  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
  -webkit-transition: opacity 0.3s;
  -moz-transition: opacity 0.3s;
  -ms-transition: opacity 0.3s;
  -o-transition: opacity 0.3s;
  transition: opacity 0.3s;
}


/* Tooltip arrow */

.info-tooltip .info-tooltip-text::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 60px;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #0BC6DD transparent;
}


/* Show the tooltip text when you mouse over the tooltip container */

.info-tooltip:hover .info-tooltip-text {
  visibility: visible;
  opacity: 1;
}

.info-tooltip .info-tooltip-text p {
  padding-bottom: 4px;
  margin: 0;
  font-weight: 100;
  width: 250px;
  white-space: normal;
}

<h1>There is a tooltip next to me <i class="info-tooltip" />
  <div class="info-tooltip-text">
    <p>This is the actual tooltip to be displayed. A bit longer than expected. Should wrap where necessary.</p>
  </div>
  </i>
</h1>