鼠标悬停时，文本/跨度旁边的图标出现在下一行答案

【问题标题】：Icon next to text/span appears in the next line on mouse hover鼠标悬停时，文本/跨度旁边的图标出现在下一行
【发布时间】：2016-08-09 14:39:58
【问题描述】：

当用户将鼠标悬停在文本（内联）旁边时，我需要在文本旁边显示一个编辑图标。当我将鼠标悬停在文本上时，编辑图标位于下一行。

我的跨度占据了 div 宽度的 100%，即使我已将其设置为 80% 宽度，而其余 20% 宽度保留给右侧图标。

跨度样式是，

span{
display: inline-block;max-width:80%;width:80%;
}

看起来，

如何在与文本相同的行的右端显示内联图标？ Plunker 代码是here。

【问题讨论】：

你想显示inline？
是的。,,,, 我将 span 的显示设置为 inline-block
但是你的文字太长了，那么你把cntr设置为20%而已，
你想在文本顶部显示图标吗？
我需要内联显示图标，在右端与文本在同一行

标签： html css

【解决方案1】：

span 默认情况下是内联元素，除非将其显示为块，否则无法为其添加宽度。

<div>
  <span style="display:inline-block; width:80%;">Hello Hello Hello</span>
  <i style="display:inline-block; padding-left:5px;float: right;   border-left: solid black 1px; width: 15%;">ICON</i>
</div>

【讨论】：

我为 span 元素添加了一个宽度，其样式为display:inline-block。问题来了，当容器的宽度小于 20% 并且您的跨度文本足够长以占用所有空间时，没有为图标元素留下空间...

【解决方案2】：

你可以这样做。

$('document').ready(function(){
     console.log('document ready callback fn is invoked')
     $('.menu-body').hide()
   })
   $('body').on('click', '.drp-down-btn', function(){
     $('.menu-body').toggle()
   })

.cntr{
   width: 20%;
   overflow: hidden;
   white-space: nowrap;
   display: block;
 }
 .cntr  i {
   visibility: hidden;
   opacity: 0;
   transition: all 0.4s;
   -webkit-transition: all 0.4s;
   cursor: pointer;
 }

<!-- .cntr:hover{
   border: solid black 1px;
 } -->
 .cntr:hover > i{
      display: inline-block;
 }
 .cntr>span>p{
   width: 15%;
   overflow:hidden;
   vertical-align:middle;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
.cntr span,.cntr p,.cntr i{
    display: inline-block;
}
 .cntr:hover  i{
   visibility: visible;
   opacity: 1;
 }

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
  <div class="cntr">
    <span>
      <p>Hello worldaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
      <i class="fa fa-edit fa-lg" style="padding-left:5px;border-left: solid black 1px;">
      </i>
      </span>
  </div>
  <script src="script.js"></script>
</body>

【讨论】：