I currently have a two-item unordered list positioned absolutely to the top right of the viewport.
<header id="top-bar">
<ul>
<li>
<a href="#">David Bowie</a>
</li>
<li>
<a href="../includes/sign_out.php" class="signUp" name="signUp">Sign Out</a>
</li>
</ul>
#top-bar {
height:47px;
background-color:rgb(43, 165, 43);
border-bottom:3px solid rgb(22, 83, 22);
font-size:0.75em;
position:relative;
z-index:1;
}
#top-bar ul {
margin:0; padding:0 0.25em;
position:absolute;
right:0px;
}
#top-bar ul > li {
display:inline;
float:left;
line-height:47px;
position: relative;
z-index:2;
}
#top-bar ul > li:first-child{
margin-left:0.45em;
background:orange;
}
The content of the last child li remains constant. However, the first child li's content is dynamic.
When the viewport width is full, the changing content doesn't matter much. But, when the viewport size decreases, particularly on mobile screens, the text should start to hide BEHIND the enclosing div, and be replaced by (...) instead. Once a certain width is reached, the li container's size will become fixed and the hiding will cease.
I'm uncertain about how to achieve this. Can it be accomplished using only CSS? I believe Javascript might need to be used to swap out the content for ellipses.
Unfortunately, I lack extensive programming knowledge, especially in Javascript, and I am pressed for time to address this issue.
If any seasoned programmers have a solution for this, I would greatly appreciate your input.
Thank you.