Welcome to WebmasterWorld Guest from 54.146.201.80

Forum Moderators: not2easy

Message Too Old, No Replies

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

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

Preferred Member

10+ Year Member

joined:Aug 12, 2005
posts:411
votes: 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.

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

New User

5+ Year Member

joined:Nov 12, 2006
posts:15
votes: 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