I have the following "top bar" which has as part of it data for the user. It will also contain his name. The code is as follows:
html, body, ul, li, a, input { box-sizing: border-box; outline: 0px solid transparent; }
.title-bar {
border-bottom: 1px solid white;
height: 128px;
width: 100%;
background-color: #999;
float: left;
}
.user-info {
width: 128px;
height: 100%;
align-items: center;
border-left: 1px solid white;
background-color: inherit;
display: flex;
justify-content: space-between;
flex-flow: column nowrap;
float: right;
text-align: center;
}
.user-info span {
overflow: hidden;
text-overflow: '.';
}
.user-info .circle {
border: 2px solid #369;
border-radius: 50%;
display: inline-block;
flex: 0 0 auto;
height: 32px;
margin: 8px 8px;
overflow: hidden;
transition: border 0.15s ease-out;
width: 32px;
}
.user-info .circle:hover { border-width: 4px; }
.user-info .container {
border-top: 1px solid white;
display: flex;
justify-content: center;
margin-top: 6px;width: 100%;
}
<div class="title-bar">
<div class="user-info">
<a href="#" class="circle"></a>
<span>Johnny B. Testname</span>
<div class="container">
<a href="#" class="circle"></a>
<a href="#" id="log-off" class="circle first" title="Log Off">
</a>
</div>
</div>
</div>
As you can see, "Johnny B. Testname" cuts off on the bottom. This is because I have set overflow: hidden;
on the span (it would otherwise push the other flex-items around which I do not want).
I was looking for a solution to "dynamically change the font-size," but I don't think that would look good (and I couldn't find anything workable). I found instead text-overflow;
and as you can see, I've set it to `text-overflow: '.';
Only problem is: it isn't getting to the point where it needs to text-overflow. I've tried setting flex-shrink: 1;
(which wouldn't matter as that's the default), display: inline;
(I got desperate) and other CSS styles but none of them have fixed the problem. I don't want to set height
or width
as I still want that span
to be dynamic.
Maybe I am using text-overflow wrong, but I think I am using per the MDN specs. I have also made a fiddle for this problem.
Thank you.