Applying overflow hidden before wrapping the next element

Question

I have a layout with a set of divs each containing three fields in different fonts displayed as:

Author
Title Date

thus structured something like:

<div>
  <div class="author">author</div>
  <div>
    <span class="title">title</span>
    <span class="date">date</span>
  </div>
</div>

The blocks are fixed width but the fields are variable width. I want the author and title to be cut off when they are too long so I applied:

.author, .title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

This works for the author, but the title gets cut off only when the date is already moved to the next line. I'd like the title to be cut of as soon as the date hits the right side like this:

+---------------------------------+
| This is a very very long auto...|
| This is a long ti... (yesterday)|
+---------------------------------+

Is this possible with css?

EDIT

Some clarification. I understand how I can give the title a maximum width as shown in various answers, but that is not what I need. The entire box has a fixed width, and ALL fields have variable width.

BUT the second line needs to be cut off at the first field (title) instead of the last field (date). Thus I'd like the max-width of the title to depend on the width of the date. Examples:

+---------------------------------+
| This is a very very long auto...|
| Short title (2 days ago)        |
+---------------------------------+

+---------------------------------+
| Some author                     |
| Bit Longer tit.. (long time ago)|
+---------------------------------+

+---------------------------------+
| Another author                  |
| This is a long ti... (yesterday)|
+---------------------------------+

I don't see how this is possible with CSS even when I restrict it to cutting edge browsers or when I start hacking the HTML with ugly things like tables.

Yet, it seems like a cleanest way to display the data to the end user, so I'm hoping for someone who knows the magic trick...

Answer 1

'span' elements are treated as inline unless otherwise specified. You need to constrain the width of .title before it hits the side of the container div.

Something like the following might work:

.title{display:block;max-width:60px;}

EDIT

Okay, so a little more playing and this seems to accomplish what you are after with your markup (assuming it's named "#wrapper")

div#wrapper{width:160px;border:1px solid #ccc;overflow:auto}
.author, .title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.title{display:block;width:60%;float:left}
.date{display:block;width:40%;float:right;}

Answer 2

You need to do something like floating the date right. Also, keep in mind that Firefox doesn't support text-overflow: ellipsis; you'd have to use something like Matt Snider's method at http://mattsnider.com/css/css-string-truncation-with-ellipsis/ ...

If you can't float the date, what you want is impossible. You'll need to rethink your design.

Answer 3

Here's my solution if I correctly understand what you're trying to do. Even though you don't know the width of the title, there is potential for the title to overflow. Since that's the case, then you should be the one to determine the when and where of how it overflows. I don't see a way around not setting max-width.

.author, .title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.title {
  max-width: 150px;
  display:inline-block;
}
.date {
  display:inline-block;
  vertical-align:top;
}

<div>
  <div class="author">author</div>
  <div>
    <span class="title">Really really really really long title</span>
    <span class="date">Date</span>
  </div>
</div>

Browser Compatibility of max-width

Answer 4

Maybe fix the height of the author element as well?

.author {
    height: 1.2em;
}

Might not work, CSS pretty much follows the basic flow layout of HTML, which assumes that the height of elements will vary with their content.

Answer 5

What you have to do is to absolutely position the <span class="date"> element to the bottom right of the container <div> and set a background image on it as well (containing an ellipsis) and make sure the z-index is set above the <span class="title"> element. Then you just let the .title element run underneath the .date element and all should be well.

div
{
    width: 200px;
    position: relative;
}
.author, .title
{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}
.date
{
    background-color: #fff;
    background-image: url(/images/ellipsis.gif);
    background-position: left bottom;
    background-repeat: no-repeat;
    position: absolute;
    right: 0px;
    bottom: 0px;
    z-index: 10;
    padding-left: 10px; /* Assuming that the bg image is this size */
}
.title
{
    z-index: 0;
}

It's working for me in FF3.5, Chrome and IE8, though as has been mentioned the text-overflow: ellipsis doesn't work well cross browser.

Answer 6

I have it working in FF using some Javascript (javascript). I haven't got it working with the ellipses yet - but with a little more work its doable (using the background image approach).

Copy paste this into a .html file to see a proof of concept - when loaded resize your browser winder so its narrower to see it automatically shift stuff around and give you the wrapping effect you want.

<html>
 <head>
  <title>test</title>
  <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js'&gt;&lt;/script&gt;
  <style type='text/css'>
   .author, .title {
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
   }
   .title, .date {
    float: left;
   }
   .date {
    margin-left:10px;
   }

   .author {
    background-color: red;
    color: white;
   }
   .title {
    background-color: blue;
    color: white;
   }
   .date {
    background-color: green;
    color: white;
   }
  </style>
  <script type='text/javascript'>
   $.resizeHeader = function() {
    var _title = $('#title');
    var _date = $('#date');
    var _container = $('#headingContainer');
    _title.css('width','auto');
    var _containerWidth = _container.width();
    var _titleWidth = _title.outerWidth(true);
    var _dateWidth = _date.outerWidth(true);
    if ((_dateWidth+_titleWidth)>_containerWidth) {
     var _deltaWidth = (_dateWidth+_titleWidth)-_containerWidth;
     var _newTitleWidth = _titleWidth-_deltaWidth;
     _title.width(_newTitleWidth);
    }
   }

   $(function() {
    $(window).resize(function() {
     $.resizeHeader();
    }).resize();;
   })  
  </script>
 </head>

 <div id='headingContainer'>
  <div class="author">This is an author title</div>
  <div>
   <span class="title" id='title'>This is the title which is very long and prone to spill over and over and over and over and over</span>
   <span class="date" id='date'>The Date</span>
  </div>
 </div>
</html>