homepage Welcome to WebmasterWorld Guest from 50.19.206.49
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Show some parts in full, Show other parts if there is enough room
Jeremy_H




msg:3155184
 4:11 pm on Nov 13, 2006 (gmt 0)

Hello,

I have a line from my web page that looks like this:

<ul>
<li>
<span class="d">Date</span>
<span class="t">Title</span>
<span class="a">Abstract</span>
<span class="s">Score</span>
</li>
</ul>

The ul's width is based upon how wide the browser is opened, and the li can go as wide as the ul but can not extend beyond or wrap to a second line.

li{overflow:hidden;white-space:nowrap}

What I would like to do is to always have the full date, title and score show, but to show only as much abstract as space allows on the line.

If the browser window was made smaller, less abstract would show. If the browser window was made larger, more abstract would show.

I know the abstract should have overflow hidden, but what about the other parts? Is this even possible in CSS? This is as far as I have made it.

.a{overflow:hidden}

Also, is it possible with CSS with something like .a:after{content:""} to include in an area visible an elipse if some of the abstract is hidden.

Thanks so much for your help.

 

yuval_raz




msg:3155253
 5:14 pm on Nov 13, 2006 (gmt 0)

hi,
did some tweaking, here is the result:
(added floats because of an IE bug...)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
font: 14px Arial, Helvetica, sans-serif;
}
ul{
list-style: none;
background: blue;
float: left;
width: 100%;
}
li{
position: relative;
overflow: hidden;
width: 100%;
text-align: center;
float: left;
border-bottom: 2px solid red;
}
.t{
position: absolute;
top: 0;
left: 0;
width: 20%;
}
.d{
position: absolute;
top: 0;
right: 0;
width: 20%;
}
.s{
position: absolute;
top: 0;
right: 20%;
width: 10%;
}
.a{
margin: 0 30% 0 20%;
width: 50%;
overflow: hidden;
white-space: nowrap;
text-align: left;
}
</style>
</head>
<body>
<ul>
<li>
<div class="d">Date</div>
<div class="t">Title</div>
<div class="a">AbstractAbstractAbstractAbstractAbstractAbstractAbstractAbstractAbstractAbstractAbstractAbstractAbstractAbstractAbstractAbstractAbstractAbstrac</div>
<div class="s">Score</div>
</li>
<li>
<div class="d">Date</div>
<div class="t">Title</div>
<div class="a">Abstract Abstract Abstract Abstract Abstract Abstract Abstract Abstract Abstract Abstract Abstract Abstract Abstract Abstract Abstract Abstract</div>
<div class="s">Score</div>
</li>
<li>
<div class="d">Date</div>
<div class="t">Title</div>
<div class="a">meepmeepmeepmeepmeepmeepmeepmeepmeepmeepmeepmeepmeepmeepmeepmeepmeepmeepmeepmeepmeepmeepmeepmeepmeepmeepmeepmeepmeepmeepmeepmeepmeepmeepmeepmee</div>
<div class="s">Score</div>
</li>
<li>
<div class="d">Date</div>
<div class="t">Title</div>
<div class="a">meep meep meep meep meep meep meep meep meep meep meep meep meep meep meep meep meep meep meep meep meep meep meep meep meep meep meep meep mee</div>
<div class="s">Score</div>
</li>
</ul>
</body>
</html>

i hope this is what you were looking for.

yuval

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved