Welcome to WebmasterWorld Guest from 50.16.24.12

Forum Moderators: not2easy

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

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

5+ Year Member



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)

5+ Year Member



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

 

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month

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