marknorkin marknorkin - 3 days ago 6
CSS Question

CSS: two divs in one line, dynamic(left) and fixed(right) width. make overflow text on dynamic div

I have two divs, they should be displayed on same line.

Div one is dynamic width, user typed text.

Div two is date, which is placed on right side.

When there's not enough width (mobile phone) I want the user typed text that doesn't fit the screen width to be overflowed.

I tried the following but

max-width
is not working here, as it only overflows text till some point:



.parent {
display: table;
width: 100%;
}

.dynamic {
display: inline-block;
max-width: 80%;
}

.fixed {
display: table-cell;
width: 75px;
}

.cutting-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

<div class="parent">
<div class="dynamic cutting-text">
could be very long text. overflows till max-width reached, so doesn't work for small screens
</div>
<div class="fixed">
30.11.16
</div>
</div>





How to achieve this for arbitrary text?

JSFiddle as well

Answer

Use CSS Flexbox. Its quite easy to implement it in flexbox. Make your .parent a flex container and apply flex properties to .dynamic { flex: 1; }. Everything will get in place automatically.

Have a look at the snippet below:

.parent {
  display: flex;
  width: 100%;
}

.dynamic {
  flex: 1;
}

.cutting-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
<div class="parent">
<div class="dynamic cutting-text">
could be very long text. overflows till max-width reached, so doesn't work for small screens
</div>
<div class="fixed">
30.11.16
</div>
</div>

Hope this helps!

Comments