Umieść ikonę edycji na span (gdy jej zawartość jest dłuższa niż span)

Question

Próbuję wyświetlić okno modulacji pokazu. To okno zawiera wiele zakresów. Ale są ograniczone przez szerokość i wysokość. A gdy zawartość zakresu jest mniejsza, niż szerokość zakresu: wszystko jest w porządku, widzę tę ikonę.

Ale gdy tekst jest za duży, nie widzę tej ikony. I nie miałem żadnych pomysłów, jak to zrobić na czystym CSSie bez używania 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; 
} 

Pierwszy ekran, pierwszy okres: to OK

drugim ekranie, po drugie przęsło: to nie jest normalne

Trzeci ekran, drugi przedział: tak musi być

ma jakieś pomysły? Również dopełnienie, margines musi być "przyjazny dla użytkownika" i taki sam w obu przypadkach.

Wypróbuj go tutaj:

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

Answer 1

Ponieważ tekst ma ustawienie whitespace: nowrap; i dojściu do końca pudełka, to nie będzie działać bez użycia position: absolute; na ikonę. Wystarczy podać rozpiętość position: relative; i zastosować dodatkowe prawe dopełnienie po najechaniu myszą.

Answer 2

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