html – 跨度上的悬停编辑图标(当其内容长于跨度时)

我尝试查看show modal窗口.该窗口包含多个范围.但是宽度和高度都有限制.当span内容小于span宽度时：一切正常,我可以看到这个图标.

但是当文字很大时,我看不到这个图标.我没有任何想法,如何在不使用Javascript(jQuery)的情况下在纯CSS上执行此操作.

HTML：

<div class="wrapper">
    <span class="first">First</span>
    <br/>
    <span class="second">Second contain a lot of text. Really long span is here</span>
</div>

CSS：

.wrapper{
    width: 300px;
    height: 500px;
    BACkground: green;
    overflow: hidden;
}

span{
    display: inline-block;
    width: 236px;
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    padding: 0px;
    margin: 10px 20px;
    padding: 0 16px 0 8px;
    white-space: nowrap;
    overflow: hidden;
    BACkground: #fc0;
    text-overflow: ellipsis;
    border: 1px solid green;
    border-radius: 4px;
}

span:hover{
  border: 1px solid blue;
  cursor: pointer;
}

span:hover::after{
    font: normal normal normal 12px FontAwesome;
    line-height: 30px;
    content: "\f040";
    float: right;
}

第一个屏幕,第一个跨度：没关系

第二个屏幕,第二个跨度：这不正常

第三个屏幕,第二个跨度：所以必须

有什么想法吗？填充,边距必须“用户友好”,两种情况都相同.

在这里试试：

http://codepen.io/anon/pen/KpMdvx

.wrapper {
  width: 300px;
  height: 500px;
  BACkground: green;
  overflow: hidden;
}
span {
  display: inline-block;
  width: 236px;
  height: 30px;
  line-height: 30px;
  font-size: 16px;
  padding: 0px;
  margin: 10px 20px;
  padding: 0 16px 0 8px;
  white-space: nowrap;
  overflow: hidden;
  BACkground: #fc0;
  text-overflow: ellipsis;
  border: 1px solid green;
  border-radius: 4px;
}
span:hover {
  border: 1px solid blue;
  cursor: pointer;
}
span:hover::before {
  font: normal normal normal 12px FontAwesome;
  line-height: 30px;
  content: "\f040";
  float: right;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="wrapper">
  <span class="first">First</span>
  <br/>
  <span class="second">Second contain a lot of text. Really long span is here</span>
</div>