跨度上的悬停编辑图标（当其内容长于跨度时）

Question

我尝试查看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;
}

第一个屏幕，第一个范围：好了

第二个屏幕，第二个范围：它不正常

第三个屏幕，第二个范围：所以必须

有任何想法吗？填充，边距必须是＆＃34;用户友好＆＃34;两种情况都是一样的。

在此尝试：

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

Answer 1

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

Answer 2

由于您的文字设置为whitespace: nowrap;并且已到达框的末尾，因此如果不在图标上使用position: absolute;，这将无效。只需给出范围position: relative;并在悬停时应用额外的右边填充。