homepage Welcome to WebmasterWorld Guest from 54.211.137.77
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Have three pieces of text on one line without using a table
And hiding unnecessary text when there isn't enough room.
ocon

5+ Year Member



 
Msg#: 4494534 posted 12:49 am on Sep 13, 2012 (gmt 0)

I have three pieces of data I would like to display on the same line:

Data A, Data B, Data C

Except for 10px padding on the left and right, Data A should be left-justified, Data B should be centered, and Data C should be right-justified. But not all pieces of data are the same length.

My current method is sloppy, code heavy, and does a poor job, especially if Data B is very small, and Data A and/or C is long.

#line{height:20px;margin:0;padding:0 10px;line-height:20px;overflow:hidden;clear:both}
#line div{float:left;margin:0;padding:0}
#a{width:34%;text-align:left}
#b{width:32%;text-align:center}
#c{width:34%;text-align:right}

<div id="line">
<div id="a">Data A</div>
<div id="b">Data B</div>
<div id="c">Data C</div>
</div>


How can I improve it?

Also, if the data gets really long, is there a way to "hide" the text if there isn't enough room to show it? Maybe force a line-break that is no longer visible because of overflow:hidden? Using the code from above, the text inside the span isn't as important as the text outside of it.

<div id="line">
<div id="a"><span>Data </span>A</div>
<div id="b"><span>Data </span>B</div>
<div id="c"><span>Data </span>C</div>
</div>

 

lucy24

WebmasterWorld Senior Member lucy24 us a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



 
Msg#: 4494534 posted 4:55 am on Sep 13, 2012 (gmt 0)

This works in current Mac browsers ("quirks" mode-- I just slapped on an html without a proper dtd). It does not work in MSIE 5. Duh ;)
<html>
<head>
<style type = "text/css">
body {line-height: 1.2em;}
.data {text-align: center; padding: 0 10px; margin: 2em 0;
overflow: hidden;}
span.left {float: left; text-align: left; padding-right: 1em; max-width: 40%;}
span.right {float: right; text-align: right; padding-right: 1em; max-width: 40%;}
.cutoff {height: 1.2em;}
</style>

</head>
<body>

<div class = "data">
<span class = "left">Data A</span>
<span class = "right">Data C</span>
Data B
</div>

<div class = "data">
<span class = "left">Quo usque tandem abutere, Catilina, patientia nostra? Quam diu etiam furor iste tuus eludet? Quem ad finem sese effrenata jactabit audacia? Nihilne te nocturnum praesidium Palatii, nihil urbis vigiliae, nihil timor populi, nihil concursus bonorum omnium, nihil hic munitissimus habendi senatus locus, nihil horum ora vultusque moverunt. Patere tua consilia non sentis? Constrictam omnium horum scientia teneri conjurationem tuam non vides? Quid proxima, quid superiore nocte egeris, ubi fueris, quos convocaveris, quid consilii ceperis, quem nostrum ignorare arbitraris? O tempora, O mores!</span>
<span class = "right">Quo usque tandem {et cetera, same text}</span>
Quo usque tandem {et cetera, same text}
</div>

<div class = "data cutoff">
<span class = "left">Quo usque tandem {et cetera, same text}</span>
<span class = "right">Quo usque tandem {et cetera, same text}</span>
Quo usque tandem {et cetera, same text}
</div>

</body>
</html>


I made it a class instead of an id just so I could try several of them on the same page.


Memo to self: "O tempora! O mores!" is not from Horace. "O tempora! O mores!" is not from Horace. "O tempora! O mores!" is not from Horace. Got that?

ocon

5+ Year Member



 
Msg#: 4494534 posted 6:21 am on Sep 13, 2012 (gmt 0)

Thank you very much Lucy! I see I was going in the right direction but over thinking it. Its much simpler now.

alt131

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4494534 posted 2:39 pm on Sep 13, 2012 (gmt 0)

Hi ocon, what a fun challenge! Is there a reason you are not using a table? I ask because if this is data then a table would be semantically correct. Second, if not a table, what about a list? How do users access the extra data that is hidden? And finally, what user agents are you targeting?

I ask because below is a more modern example of what Lucy has suggested - using a list for the data and text-overflow:ellipsis to deal with the longish content. It requires fixed widths to work around ff's text-overflow bug, but if you can accept the jump, or have another way of dealing with the extra content,the widths can be percentages to make it even more flexible.

If you always know what information is less important this could be simplified even more by using white-space:pre and simply starting the secondary content on a new line (return, not <br> ) in the HTML.
CSS
ul {
/*set a width other than 100% to avoid ff's jump on hover */
width:1000px;
}

li {
list-style-type:none;
float:left;
margin:10px;
border:3px ridge red;
width:280px; /*set a width to avoid ff jumping the ellipsis and scroll bar width on hover*/
height:20px ;
padding:0 10px;
white-space:nowrap; /*required for ellipsis*/
text-overflow: ellipsis;
overflow:hidden;
}

li:hover {
white-space:normal;
height:auto;
overflow:visible;
}

li:nth-child(2) {text-align:center}
li:last-of-type{text-align:right}

HTML
<ul>
<li>Data a Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipitlobortis nisl ut aliquip ex ea commodo consequat. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</li>
<li>Data b </li>
<li>Data c</li>
</ul>

Edit reason
Removing smilies in code

[edited by: alt131 at 10:29 pm (utc) on Sep 13, 2012]

lucy24

WebmasterWorld Senior Member lucy24 us a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



 
Msg#: 4494534 posted 8:52 pm on Sep 13, 2012 (gmt 0)

<ot>
Leaving off the "lorem ipsum" made it more obvious that we're looking at raw OCR of an oldish text-- something I'd recognize on sight thanks to e-books background. This in turn sent me off for some long-overdue investigating.

Ran it to ground at The Straight Dope [straightdope.com]. Thank you, Professor McClintock. It's from De Finibus, which I'm pretty sure I was supposed to have read at some point. But, er, didn't.

I used Quousque tandem because that's what (physical) typesetters used in the early centuries for proof sheets. It went out of use because it simply didn't show the right letters for modern languages. In particular, how many English texts start with a capital Q, let alone an oversized display version? :)
</ot>

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