469,275 Members | 1,649 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,275 developers. It's quick & easy.

How to prevent DIV contents from wrapping?

Hello,

I have the following HTML / CSS that draws 2 rows. Each row has 3
cells. I want the cells within each row to span a single line. Each
cell is 100px wide, and the row containing them is 250px wide. Clearly
the last cell won't fix, but rather than wrapping to the next 'line'
within the row, I'd like the last cell to be clipped and only showing
the first 50px.

This code was developed in IE6. Can't say what it looks like in
mozilla.

Any ideas anyone?

Oh, and before you ask, no I don't have a URL you can visit -- sorry!

<html>
<head>
<style>
..cell {
border: 1px dashed #999999;
float: left;
height: 22px;
overflow: hidden;
padding: 0px 1px 0px 1px;
text-overflow: ellipsis;
width: 100px;
}
..row {
border: 1px solid #333333;
height: 22px;
width: 250px;
}
</style>
</head>
<body>
<div class="row">
<span class="cell">abcdefghijklmnopqrstuvwxyz</span>
<span class="cell">abcdefghijklmnopqrstuvwxyz</span>
<span class="cell">abcdefghijklmnopqrstuvwxyz</span>
</div>
<div class="row">
<span class="cell">abcdefghijklmnopqrstuvwxyz</span>
<span class="cell">abcdefghijklmnopqrstuvwxyz</span>
<span class="cell">abcdefghijklmnopqrstuvwxyz</span>
</div>
</body>
</html>

Jul 21 '05 #1
12 19077
On 17 Feb 2005 11:26:48 -0800, <sn****@mxlogic.com> wrote:
I have the following HTML / CSS that draws 2 rows. Each row has 3
cells.
Rows? Cells? Why don't you use a table if this is tabular data? If it isn't,
what's with the rows and cells talk?
I want the cells within each row to span a single line. Each
cell is 100px wide, and the row containing them is 250px wide. Clearly
the last cell won't fix, but rather than wrapping to the next 'line'
within the row, I'd like the last cell to be clipped and only showing
the first 50px.


Read:
<http://www.w3.org/TR/REC-CSS2/text.html#white-space-prop> and
<http://www.w3.org/TR/html401/struct/text.html#edef-PRE>
--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'
Jul 21 '05 #2
On 17 Feb 2005 20:35:26 +0100, Barbara de Zoete <b_********@hotmail.com> wrote:
On 17 Feb 2005 11:26:48 -0800, <sn****@mxlogic.com> wrote:
I have the following HTML / CSS that draws 2 rows. Each row has 3
cells.


Rows? Cells? Why don't you use a table if this is tabular data? If it isn't,
what's with the rows and cells talk?
I want the cells within each row to span a single line. Each
cell is 100px wide, and the row containing them is 250px wide. Clearly
the last cell won't fix, but rather than wrapping to the next 'line'
within the row, I'd like the last cell to be clipped and only showing
the first 50px.


Read:
<http://www.w3.org/TR/REC-CSS2/text.html#white-space-prop> and
<http://www.w3.org/TR/html401/struct/text.html#edef-PRE>


Oh, wait, and this:
<http://www.w3.org/TR/REC-CSS2/visufx.html#overflow-clipping>

--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'
Jul 21 '05 #3
Why use tables when DIV's produce cleaner code. Personally, I've used
TABLEs for years and I wish other developers would catch on to the fact
that they suck! DIVs are far better -- you only need to know how to use
them properly before you'll agree with this assertion.

Steve

Barbara de Zoete wrote:
On 17 Feb 2005 11:26:48 -0800, <sn****@mxlogic.com> wrote:
I have the following HTML / CSS that draws 2 rows. Each row has 3
cells.
Rows? Cells? Why don't you use a table if this is tabular data? If it

isn't, what's with the rows and cells talk?
I want the cells within each row to span a single line. Each
cell is 100px wide, and the row containing them is 250px wide. Clearly the last cell won't fix, but rather than wrapping to the next 'line' within the row, I'd like the last cell to be clipped and only showing the first 50px.

Read:
<http://www.w3.org/TR/REC-CSS2/text.html#white-space-prop> and
<http://www.w3.org/TR/html401/struct/text.html#edef-PRE>
--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses:

----------. | weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html | | webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html | |zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html | `-------------------------------------------------- --<--@

------------'

Jul 21 '05 #4
in comp.infosystems.www.authoring.stylesheets, sn****@mxlogic.com wrote:
Why use tables when DIV's produce cleaner code.
The aim is not cleaner code. The aim is correct markup.
Personally, I've used
TABLEs for years and I wish other developers would catch on to the fact
that they suck! DIVs are far better -- you only need to know how to use
them properly before you'll agree with this assertion.


Barbara does know it well. You abviously never got the idea. As your way
of quoting indicates, you didn't read, let alone understand message you
answered. Try again. If you don't misuse div, then you use strange
terminology.

[TOFU snipped.]

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Utrecht, NL.
Jul 21 '05 #5
[ Please do not top-post. Cut what you don't reply to, attribute
what you do reply to and then reply underneath the quote ]

On 17 Feb 2005 11:44:55 -0800, <sn****@mxlogic.com> wrote:

[ top-post fixed this once ]
Barbara de Zoete wrote:
On 17 Feb 2005 11:26:48 -0800, <sn****@mxlogic.com> wrote:
> I have the following HTML / CSS that draws 2 rows. Each row has 3
> cells.
Rows? Cells? Why don't you use a table if this is tabular data? If it

isn't,
what's with the rows and cells talk?

[ quotes brought back to what's relevant this once ]
Why use tables when DIV's produce cleaner code.
Only if the content is not a data table. Use semantic markup before anything
else. So a paragraph is a paragraph. A header is a header. A table is a table. A
list is a list. It is really as simple as that.
If there is no appropriate block level element defined in the spec you use, use
a div for element. If there is no appropriate inline element defined, use a
span. There is nothing to it, actually.

Personally, I've used
TABLEs for years and I wish other developers would catch on to the fact
that they suck!
What's with the use of capitals and ! Afraid one doesn't read what you write
otherwise? Capitals in usenet equal shouting, as do !! I see no reason for
shouting.
Besides, the table element and all related are perfect for publishing tabular
data. So I have to disagree.
DIVs are far better -- you only need to know how to use
them properly before you'll agree with this assertion.


Wrong. You need to use the appropriate element in your markup, so a wiser man
(m/f) will never agree with your assertion.
--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses:


[ Please delete the signature of the post you reply to as it
has no further relevance for discussion ]
--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'
Jul 21 '05 #6
I would invite you to try the code for yourself and if nothing other
than an intellectual exercise, see if you can get the last cell to be
clipped.

Any takers?

Steve

Jul 21 '05 #7
Here's a simple code example if you prefer...

<html>
<head>
<style>
..cell {
border: 1px dashed #999999;
float: left;
width: 100px;
}
..row {
border: 1px solid #DDDDDD;
overflow: hidden;
width: 250px;
}
</style>
</head>
<body>
<div class="row">
<span class="cell"></span>
<span class="cell"></span>
<span class="cell"></span>
</div>
</body>
</html>

Jul 21 '05 #8
You're not really a quick learner, are you? Quote properly and attribute the
quotes and reply underneath the quote.
On 17 Feb 2005 12:11:41 -0800, <sn****@mxlogic.com> wrote:
I would invite you to try the code for yourself and if nothing other
than an intellectual exercise, see if you can get the last cell to be
clipped.


So we do your job for you?

Go check out the three valuable links I gave you.
Write a page with proper markup and proper CSS.
Come up with a URL where we can find your modified code and ask new questions if
still applicable.

Byebye

--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'
Jul 21 '05 #9
For anyone who's interested... using <NOBR> tags seems to work...
(oops... I mean <nobr>)

<html>
<head>
<style>
IMG {
border: 1px solid black;
width: 100px;
}
SPAN {
border: 1px solid blue;
width: 100px;
overflow: hidden;
text-overflow: ellipsis;
}
DIV {
border: 1px solid green;
overflow: hidden;
height: 50px;
width: 250px;
}
</style>
</head>
<body>
<div><nobr><img src="http://www.google.com/images/logo.gif"><img
src="http://www.google.com/images/logo.gif"><img
src="http://www.google.com/images/logo.gif"></nobr></div>

<div><nobr><span>abcdefghijklmnopqrstuvwxyz</span><span>abcdefghijklmnopqrstuvwxyz</span><span>abcdefghijklmnopqrstuvwxyz</span></nobr></div>
</body>
</html>

Jul 21 '05 #10
On 17 Feb 2005 11:44:55 -0800 sn****@mxlogic.com wrote:
Why use tables when DIV's produce cleaner code. Personally, I've used
TABLEs for years and I wish other developers would catch on to the fact
that they suck! DIVs are far better -- you only need to know how to use
them properly before you'll agree with this assertion. Steve


Where was there a <table> tag?
Oh you just saw the "row" word and automatically assumed tables.
Two divisions, six spans. Zero tables.
Jul 21 '05 #11
"Richard" <An*******@127.001> wrote:
On 17 Feb 2005 11:44:55 -0800 sn****@mxlogic.com wrote:
Why use tables when DIV's produce cleaner code. Personally, I've used
TABLEs for years and I wish other developers would catch on to the fact
that they suck! DIVs are far better -- you only need to know how to use
them properly before you'll agree with this assertion.
Where was there a <table> tag?


There wasn't, but it sounds like maybe there should be.
Oh you just saw the "row" word and automatically assumed tables.
The person you're quoting above is the person who asked the original
question. So the rows are his.
Two divisions, six spans. Zero tables.


Exactly.

(The other) Steve is using divs in a way, with references to rows and
cells, that suggsts he has actual tabular data. Barbara suggested that
he might be better off with a real table. Steve then responded with
what you quote above. Then your post comes in from left field making
about as much sense as you normally do. Please either take basic
comprehension lessons or stop posting.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>
Jul 21 '05 #12
sn****@mxlogic.com wrote:
I have the following HTML / CSS that draws 2 rows. Each row has 3
cells. I want the cells within each row to span a single line. Each
Are you referring to these as 'cells' simply out of some bad habit
picked up in the old days of tables for layout? Or are these actual
data cells, in which case why aren't they marked up as table cells?
cell is 100px wide, and the row containing them is 250px wide. Clearly
the last cell won't fix, but rather than wrapping to the next 'line'
within the row, I'd like the last cell to be clipped and only showing
the first 50px.
So the content of the last cell is important enough to put into a web
page but not important enough to show to visitors who don't take the
effort to override your CSS? Odd.
This code was developed in IE6. Can't say what it looks like in
mozilla.
Why not?
Any ideas anyone?
Look at the overflow and/or clip properties in the CSS spec.

Or ask yourself why you're putting content into a web page if you
don't want visitors to see it.
Oh, and before you ask, no I don't have a URL you can visit -- sorry!
Your loss. If you can't put a page up showing what's actually
happening then all you'll get is us lot asking question after question
until we either work out what the real problem is, or we get bored, or
you throw a hissy fit and stomp off.
height: 22px;
So if the user has text size set that's larger than 22px what happens?
text-overflow: ellipsis;
text-overflow is a Microsoft invention and isn't part of CSS 1/2/2.1
(don't know about 3) and iesn't supported by any browser other than
IE. I hope you;re not relying on it.
<span class="cell">abcdefghijklmnopqrstuvwxyz</span>
<span class="cell">abcdefghijklmnopqrstuvwxyz</span>
<span class="cell">abcdefghijklmnopqrstuvwxyz</span>


And what's your real content like? Does it include spaces? Can it wrap
within the "cells"?

Why are you using spans here? As soon as you float a span you turn it
into a block level element so you may as well use a div - gives you
more freedom over whatever markup you use inside. Though proper markup
that actually reflects what the content is would be even better.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>
Jul 21 '05 #13

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

3 posts views Thread by Tuuska | last post: by
2 posts views Thread by Paul E Collins | last post: by
7 posts views Thread by PJ | last post: by
7 posts views Thread by mercurius_1 | last post: by
14 posts views Thread by Ed Jay | last post: by
10 posts views Thread by hendedav | last post: by
14 posts views Thread by jehugaleahsa | last post: by
1 post views Thread by CARIGAR | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.