Hover edit icon on span (when its content is longer than span)

I try to view show modal window. This window contain multiple span. But there are limited by width and height. And when span content is smaller, than span width: all is OK, I can see this icon.

But when text is to big I could not see this icon. And I didn't have any ideas, how to do this on pure CSS without using Javascript (jQuery).

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;
}

First screen, first span: it's OK

Second screen, second span: it's not normal

Third screen, second span: so must be

Have any ideas? Also padding, margin must be "user-friendly" and the same in both cases.

Try it here:

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>

---

Because your text has a whitespace: nowrap; setting and is reaching the end of the box, this won't work without using position: absolute; on the icon. Just give the span position: relative; and apply an extra right-padding on hover.

链接地址: http://www.djcxy.com/p/26340.html

上一篇: 合并冲突错误，当提到的文件没有变化时

下一篇: 跨度上悬停编辑图标（当其内容长于跨度时）