跨度上悬停编辑图标（当其内容长于跨度时）
我尝试查看显示模式窗口。 该窗口包含多个跨度。 但是有宽度和高度的限制。 当跨度内容小于跨度宽度时：一切正常，我可以看到这个图标。
但是，当文字大，我看不到这个图标。 我没有任何想法，如何在不使用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> 因为你的文本有一个whitespace: nowrap; 设置并到达盒子的末端，如果不使用position: absolute; 在图标上。 只需给出跨度position: relative; 并在悬停时应用额外的右键填充。
上一篇: Hover edit icon on span (when its content is longer than span)