The header I have created, shown in the image, is facing two issues. Firstly, I am unable to add ellipsis to the span tag even though I used it. I want the ellipsis to appear when the screen resolution is small. Secondly, the image uploaded is not displaying correctly as it is just a demo image.
<div class='sign-out'>
<span>Show name</span>
<a>Sign out</a>
</div>
.sign-out span {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 10%;
}
I also want to include images as depicted in the attached picture.
<div class='toggle-icon'>
<span class='image-background'>
<img src='https://dl.dropboxusercontent.com/s/gisoddbkajwuk1j/chart.png?dl=0'/>
</span>
<span class='image-background'>
<img src='https://dl.dropboxusercontent.com/s/6yft5r97hi1pik7/table.png?dl=0'/>
</span>
</div>
[![enter image description here][1]][1]
When attempting to remove the background shadow of buttons using the following code:
.image-background{
background-color: black;
width: 30px;
height: 25px;
text-shadow: none !important;
border: none !important;
box-shadow: none !important;
}
It doesn't seem to work properly. Any suggestions for this issue?