Symbol neben Text/Bereich erscheint in der nächsten Zeile auf Maus Hover

Ich muss ein Bearbeitungssymbol neben dem Text anzeigen (Inline), wenn der Benutzer die Maus darüber bewegt. Wenn ich den Mauszeiger über den Text halte, fällt das Bearbeitungssymbol in die nächste Zeile.Symbol neben Text/Bereich erscheint in der nächsten Zeile auf Maus Hover

Meine Spanne nimmt die 100% div-Breite auf, obwohl ich sie auf 80% Breite eingestellt habe und der Rest 20% Breite ist für das rechte Symbol reserviert.

Span Art,

span{ 
display: inline-block;max-width:80%;width:80%; 
}

Es sieht aus wie,

Wie kann ich das Symbol Inline-Anzeige, am rechten Ende in der gleichen Zeile wie der Text? Plunker-Code ist here.

Quelle

2016-04-18 Madhavan Kumar

Sie 'inline' angezeigt werden? – mmativ

ja. ,,,, ich stelle die Anzeige für die Spanne als 'Inline-Block' –

aber Ihren Text so lang, dann setzen Sie die' cntr' nur für 20%, – mmativ

Sie können so tun.

$('document').ready(function(){ 
 
    console.log('document ready callback fn is invoked') 
 
    $('.menu-body').hide() 
 
    }) 
 
    $('body').on('click', '.drp-down-btn', function(){ 
 
    $('.menu-body').toggle() 
 
    })

.cntr{ 
 
    width: 20%; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    display: block; 
 
} 
 
.cntr i { 
 
    visibility: hidden; 
 
    opacity: 0; 
 
    transition: all 0.4s; 
 
    -webkit-transition: all 0.4s; 
 
    cursor: pointer; 
 
} 
 

 
<!-- .cntr:hover{ 
 
    border: solid black 1px; 
 
} --> 
 
.cntr:hover > i{ 
 
     display: inline-block; 
 
} 
 
.cntr>span>p{ 
 
    width: 15%; 
 
    overflow:hidden; 
 
    vertical-align:middle; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
} 
 
.cntr span,.cntr p,.cntr i{ 
 
    display: inline-block; 
 
} 
 
.cntr:hover i{ 
 
    visibility: visible; 
 
    opacity: 1; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<body> 
 
    <div class="cntr"> 
 
    <span> 
 
     <p>Hello worldaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p> 
 
     <i class="fa fa-edit fa-lg" style="padding-left:5px;border-left: solid black 1px;"> 
 
     </i> 
 
     </span> 
 
    </div> 
 
    <script src="script.js"></script> 
 
</body>

Quelle

2016-04-18 01:46:12 mmativ

span ist Inline-Element standardmäßig aktiviert und Sie können es nicht hinzufügen Breite, wenn Sie es als Block angezeigt werden soll.

<div> 
 
    <span style="display:inline-block; width:80%;">Hello Hello Hello</span> 
 
    <i style="display:inline-block; padding-left:5px;float: right; border-left: solid black 1px; width: 15%;">ICON</i> 
 
</div>

Quelle

2016-04-18 01:54:35

Ich hatte eine Breite zum span-Element mit seinem Stil als "display: Inline-Block" hinzugefügt. Das Problem tritt auf, wenn die Breite des Containers weniger als 20% beträgt und der Text für die Spanne lang genug ist, um den gesamten Platz einzunehmen, so dass kein Platz für das Icon-Element bleibt ... –

Symbol neben Text/Bereich erscheint in der nächsten Zeile auf Maus Hover

Antwort

Verwandte Themen