如何防止DIV内容包装? [英] How to prevent DIV contents from wrapping?

查看:49
本文介绍了如何防止DIV内容包装?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

您好,


我有以下HTML / CSS绘制2行。每行有3个
的单元格。我希望每行中的单元格跨越一行。每个

单元格宽100px,包含它们的行宽250px。显然

最后一个单元格无法修复,而是包裹到行中的下一行

,我想要最后一个单元格被剪辑,只显示前50px的



此代码是在IE6中开发的。不能说它是什么样的

mozilla。


任何人的想法吗?


哦,在你问之前,不,我没有你可以访问的网址 - 对不起!


< html>

< head>

< style>

..cell {

border:1px dashed#999999;

float:left;

身高:22px;

溢出:隐藏;

填充:0px 1px 0px 1px;

文本溢出:省略号;

宽度:100px;

}

..row {

border:1px solid#333333 ;

身高:22px;

宽度:250px;

}

< / style>

< / head>

< body>

< div class =" row">

< ; span class =" cell"> abcdefghijklmnopqrstuvwxyz< / span>

< span class =" cell"> abcdefghijklmnopqrstuvwxyz< / span>

< span类= QUOT;细胞"> ABCDEFGHIJKLMNOPQRSTUVWXYZ&升t; / span>

< / div>

< div class =" row">

< span class = " cell"> abcdefghijklmnopqrstuvwxyz< / span>

< span class =" cell"> abcdefghijklmnopqrstuvwxyz< / span>

< span class =" cell"> abcdefghijklmnopqrstuvwxyz< / span>

< / div>

< / body>

< / html>

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>

推荐答案

2005年2月17日11:26:48 -0800,< sn **** @ mxlogic.com>写道:
On 17 Feb 2005 11:26:48 -0800, <sn****@mxlogic.com> wrote:
我有以下HTML / CSS绘制2行。每行有3个单元格。


行?细胞?如果这是表格数据,为什么不使用表?如果不是,

与行和单元格的对话是什么?

我希望每行中的单元格跨越一行。每个
单元格宽100px,包含它们的行宽250px。显然,最后一个单元格不会被修复,而是在行中包裹到下一行''
,我希望最后一个单元格被剪切,只显示
前50px。
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.




阅读:

< http://www.w3.org/TR/REC-CSS2/ text.html#空白 - 丙>和

< http://www.w3.org/TR/html401/struct/text.html#edef-PRE>

-

, - - < - @ - PretLetters:''woest wyf'',遇见vele interesses:----------。

|博客| 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 |

` --------------------------- ----------------------- - < - @ ------------''



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 |
`-------------------------------------------------- --<--@ ------------''


2005年2月17日20:35:26 +0100,Barbara de Zoete< b _ ******** @ hotmail.com>写道:
On 17 Feb 2005 20:35:26 +0100, Barbara de Zoete <b_********@hotmail.com> wrote:
2005年2月17日11:26:48 -0800,< sn **** @ mxlogic.com>写道:
On 17 Feb 2005 11:26:48 -0800, <sn****@mxlogic.com> wrote:
我有以下HTML / CSS绘制2行。每行有3个单元格。
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?

我希望每行中的单元格跨越一行。每个
单元格宽100px,包含它们的行宽250px。显然,最后一个单元格不会被修复,而是在行中包裹到下一行''
,我希望最后一个单元格被剪切,只显示
第一个50px。
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.



阅读:
< http://www.w3.org/TR/REC-CSS2/text.html#white-space-丙>和
< http://www.w3.org/TR/html401/struct/text.html#edef-PRE>



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>




哦,等等,这个:

< http://www.w3.org/TR/REC-CSS2/visufx.html#overflow-clipping>


-

, - - < - @ - PretLetters:''woest wyf'',遇见vele interesses:----------。

|博客| 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 |

` --------------------------- ----------------------- - < - @ ------------''



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 |
`-------------------------------------------------- --<--@ ------------''


为什么在DIV生成更干净的代码时使用表格。就我个人而言,我多年来一直使用

TABLEs,我希望其他开发人员能够接受他们吮吸的事实

! DIV要好得多 - 在你同意这个断言之前,你只需要知道如何正确使用




Steve


Barbara de Zoete写道:
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:
2005年2月17日11:26:48 -0800,< sn **** @ mxlogic.com>写道:
On 17 Feb 2005 11:26:48 -0800, <sn****@mxlogic.com> wrote:
我有以下HTML / CSS绘制2行。每行有3个单元格。
行?细胞?如果这是表格数据,为什么不使用表?如果它
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?

我希望每行中的单元格为跨越一条线。每个
单元格宽100px,包含它们的行宽250px。
很明显,最后一个单元格不会修复,而是包裹到行中的下一个
''行'',我希望最后一个单元格被剪切,只需
显示前50px。

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

-
, - - < - @ - PretLetters:''woest wyf'',遇见了vele interesses:
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:



----------。 |博客|
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
| `------------------------------------------------- - - < - @


----------. | 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 | `-------------------------------------------------- --<--@



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


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


这篇关于如何防止DIV内容包装?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆