Home/ Questions/Q 579643
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T14:23:17+00:00

I have a layout with a set of divs each containing three fields in

  • 0

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…

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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'></script>
  <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>
    • 0