ios，safari设备上的Bootstrap popover对齐问题

Question

我使用bootstrap popover向用户显示提示消息。 它适用于Windows，Android设备。但内容占据了ios和safari设备的第二行。请检查图像并尝试帮助我。我已经尝试了很多方法来改变CSS，但无法解决问题。

页面上有多个弹出窗口。如果用户想要关闭，则必须单击每个弹出窗口的关闭按钮。这是要求。 Thatswhy我使用javascript添加了关闭按钮。

<div id="hoverforlanguage"> 
  <span class="editbtnprofilea color5 nopadd padtop10 shwmobileedit" data-toggle="modal" data-target="#languagesmodal"><i class="fa fa-pencil fa-lg" aria-hidden="true"></i></span>
  <h4 class="control-label bold color2">Languages</h4>
  <hr class="hidden-print backgroundcolor2">
</div>

.popover-content{
  font-family: 'Caveat', cursive;
  font-weight: bold;
  font-size: large;
  padding: 0px 5px;
}
.button.close{
  -webkit-appearance: none;
  padding: 0;
  cursor: pointer;
  background: 0 0;
  border: 0
}
.close{
  float: right;
  font-size: 21px;
  font-weight: 700;
  line-height: 1;
  color: #000;
  text-shadow: 0 1px 0 #fff;
  filter: alpha(opacity=20);
  opacity: .2
}

$(document).ready(function() {
  $('#hoverforlanguage>.editbtnprofilea').popover({ 'placement':'right', html: 'true','content':'<button type="button" id="close" class="close" onclick="$(&quot;#hoverforlanguage>.editbtnprofilea&quot;).popover(&quot;hide&quot;);$(&quot;#hoverforlanguage&quot;).find(&quot;.editbtnprofilea&quot;).hide();">&times;</button><span style="float: left;">Add Languages </span>' }).popover('show').on('click',function(){ $(this).popover('hide'); 
  });
});

Answer 1

那么，根据您要求的结果，这里有一些解决方案 - 我只能想象它们会起作用，没有可用的代码就无法测试它们。

a）文本顶部的关闭按钮：

.close {
  position:absolute;
  z-index:2
  top:10px;
  right:10px;
}

b）文字包装：

.popover {
  white-space:normal;
}
.close {
  float:right;
}
.popover span {
  float:none; // only writing this because you have float applied
}

c）在ios上看起来字体大小略大，所以你也可以尝试：

.popover {
  font-size:0.8em; // Trial and error size
}