Hover Bearbeitungssymbol auf span (wenn der Inhalt länger als span ist)

Question

Ich versuche, Modal-Fenster anzuzeigen. Dieses Fenster enthält mehrere Bereiche. Aber es sind begrenzt durch Breite und Höhe. Und wenn der Inhalt der Spannweite kleiner ist als die Spannweite: alles ist OK, kann ich dieses Symbol sehen.

Aber wenn Text zu groß ist, konnte ich dieses Symbol nicht sehen. Und ich hatte keine Ideen, wie man das auf reinem CSS ohne Javascript (jQuery) macht.

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

ersten Bildschirm erste Wegstück: es ist OK

Zweiter Bildschirm, zweite Spannweite: es ist

dritte Bildschirm, zweite Spanne nicht normal: so muss

irgendwelche Ideen sein? Auch Padding, Rand muss "benutzerfreundlich" und in beiden Fällen gleich sein.

Versuchen Sie es hier:

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

Answer 1

Weil Ihr Text eine whitespace: nowrap; Einstellung hat und das Ende der Box erreicht, das mit position: absolute; auf das Symbol nicht ohne funktioniert. Geben Sie einfach die Spanne position: relative; ein und wenden Sie beim Hover einen zusätzlichen Right-Padding an.

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>