Databases
StackOverflow2013
Postsdbo
POApplying overflow hidden before wrapping the next element
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POApplying overflow hidden before wrapping the next element
    text
    copied!<p>I have a layout with a set of divs each containing three fields in different fonts displayed as:</p> <pre><code>Author Title Date </code></pre> <p>thus structured something like:</p> <pre><code>&lt;div&gt; &lt;div class="author"&gt;author&lt;/div&gt; &lt;div&gt; &lt;span class="title"&gt;title&lt;/span&gt; &lt;span class="date"&gt;date&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>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:</p> <pre><code>.author, .title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } </code></pre> <p>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:</p> <pre><code>+---------------------------------+ | This is a very very long auto...| | This is a long ti... (yesterday)| +---------------------------------+ </code></pre> <p>Is this possible with css?</p> <p><strong>EDIT</strong></p> <p>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. </p> <p>BUT the second line needs to be cut off at the first field (title) instead of the last field (date). <strong>Thus I'd like the max-width of the title to depend on the width of the date.</strong> Examples:</p> <pre><code>+---------------------------------+ | 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)| +---------------------------------+ </code></pre> <p>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.</p> <p>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...</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload