4lackof 4lackof -4 years ago 127
CSS Question

Getting text-overflow in a flex-box to work

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">

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
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
as I still want that
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.

Answer Source


.user-info span {
  overflow: hidden;
  text-overflow: ellipsis; /* for getting the end dots */
  display: inline-block; /* for making span a block (inline-block) so that it accepts max-width */
  max-width: 90%; /* specify the width */
  white-space: nowrap; /* for keeping text in single line */
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download