を置くマウスに次の行に表示されます。テキストの上にカーソルを置くと、編集アイコンが次の行に表示されます。アイコン上にユーザーがマウスを置いたときに、私は、次のテキスト（インライン）にある編集アイコンを表示する必要が
私のスパンは、私は80％の幅に設定しており、残りの20％の幅が右側のアイコンのために予約されていても、divの幅の100％を占めています。
スパンのスタイルは、私はテキストと同じ行の右端に、アイコンをインラインで表示することができますどのように
、のように見え、
span{
display: inline-block;max-width:80%;width:80%;
}
のですか？ プランカコードはhereです。
このようにすることができます。
$('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>spanデフォルトではインライン要素であり、あなたはブロックとしてそれを表示しない限り、あなたはそれに幅を追加することはできません。
<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>と同じ行の右端に、アイコンをインラインで表示する必要があります。コンテナの幅が少ない20パーセントを言っているし、あなたのスパンテキストはアイコン要素のためにスペースを残さない、その空間のすべてを取るのに十分長い場合の問題は、付属しています... –
あなたは 'inline'を表示したいですか？ – mmativ
はい。,,,,私は –
が、あなたのテキスト限り'としてスパンのための表示を設定していますテキスト？インラインblock'： – mmativ