帮忙看看 怎样控制td宽度定死,不要被内容撑开?谢谢

c_delight 2013-03-22 08:45:42
编辑器生成的一段代码如下:
<td style="border-bottom:windowtext 1pt solid;border-left:windowtext 1pt solid;border-top:windowtext 1pt solid;border-right:windowtext 1pt solid;" valign="top" width="96">
<p style="text-align:center;" align="center">
<span style="font-size:12pt;"></span>
</p>
<p style="text-align:center;" align="center">
<span style="font-size:12pt;"><span> </span></span>
</p>
<p style="text-align:center;" align="center">
<span style="font-family:宋体;font-size:12pt;">营养豆腐羹</span><span style="font-size:12pt;">180g</span><span style="font-size:12pt;"></span>
</p>
<p style="text-align:center;" align="center">
<span style="font-family:宋体;font-size:12pt;">肉丁烧卖</span><span style="font-size:12pt;"> <span>80g</span><span></span></span>
</p>
<p style="text-align:center;" align="center">
<span style="font-size:12pt;"><span>                                                            </span></span>
</p>
</td>

这段代码的td是有宽度限制的,但是被里面最后一部分的空格给撑开了。
在外围的div中加入:

.artxt td
{
overflow:hidden;
word-wrap: break-word;

}

360浏览器可以截断空格,但是IE和FF都不好用,请问各位怎么解决。
...全文
1350 11 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
11 条回复
切换为时间正序
请发表友善的回复…
发表回复
jswatcher 2013-03-23
  • 打赏
  • 举报
回复
引用 10 楼 jswatcher 的回复:
…… 否则,因为你无法用 selector 特定你的目标 td,也就无法用 CSS!!!
我的意思是在不能修改 HTML 文件,只能用 CSS的情况下, 找找你的目标 td 的特征,我觉得,如何用 selector 特定你的目标 td,才是解决问题的关键。而这一步只有你自己来做了。因为这里其他人不知道你的全部HTML 文件的要求是什么。 有了 selector 才能谈到下一步:如何用 css style property 去修饰 td 的行为。
jswatcher 2013-03-23
  • 打赏
  • 举报
回复
引用 9 楼 c_delight 的回复:
不能这么设置 width: 96px; 因为编辑器中的表格宽度不定。 谢谢
不用谢,大家只是互相帮忙。 你的意思是其它宽度不定格<td>里也有 <p>. 那你的问题不容易。 不知道你其他 td 的特征。 你的目标 td 必须有与其它 td 有不同的地方。 否则,因为你无法用 selector 特定你的目标 td,也就无法用 CSS!!!
c_delight 2013-03-23
  • 打赏
  • 举报
回复
引用 8 楼 jswatcher 的回复:
Easy, try this: CSS code?1234td p { width: 96px; display: block; /*This is optional*/}
不能这么设置 width: 96px; 因为编辑器中的表格宽度不定。 谢谢
jswatcher 2013-03-23
  • 打赏
  • 举报
回复
Easy, try this:

td p {
  width: 96px;
  display: block; /*This is optional*/
}
c_delight 2013-03-22
  • 打赏
  • 举报
回复
引用 6 楼 bbjbepzz 的回复:
引用 5 楼 c_delight 的回复: 引用 4 楼 bbjbepzz 的回复:style="border-bottom:windowtext 1pt solid;border-left:windowtext 1pt solid;border-top:windowtext 1pt solid;border-right:windowtext 1pt solid;max-width:96px;"……
不是每个td都是96px宽的,table中有很多td,table是由用户从word中或者wps中拷贝出来的,所以不一定。 三楼的答案距离问题的解决很近了,希望大家贡献力量。谢谢
bbjbepzz 2013-03-22
  • 打赏
  • 举报
回复
引用 5 楼 c_delight 的回复:
引用 4 楼 bbjbepzz 的回复:style="border-bottom:windowtext 1pt solid;border-left:windowtext 1pt solid;border-top:windowtext 1pt solid;border-right:windowtext 1pt solid;max-width:96px;" td这段代码……
td{ max-width:96px }
c_delight 2013-03-22
  • 打赏
  • 举报
回复
引用 4 楼 bbjbepzz 的回复:
style="border-bottom:windowtext 1pt solid;border-left:windowtext 1pt solid;border-top:windowtext 1pt solid;border-right:windowtext 1pt solid;max-width:96px;"
td这段代码是不能变的,需要在外层控制它的格式,因为这段代码是编辑器自动生成的。 谢谢
bbjbepzz 2013-03-22
  • 打赏
  • 举报
回复
style="border-bottom:windowtext 1pt solid;border-left:windowtext 1pt solid;border-top:windowtext 1pt solid;border-right:windowtext 1pt solid;max-width:96px;"
c_delight 2013-03-22
  • 打赏
  • 举报
回复
引用 2 楼 oxfed 的回复:
打错了, td{ display:block; float:left;}
有效果,但是td的border,就是边框变的乱了。有的大有的小,不像table了。
oxfed 2013-03-22
  • 打赏
  • 举报
回复
打错了, td{ display:block; float:left;}
oxfed 2013-03-22
  • 打赏
  • 举报
回复
td{ display:none;}
在做table页面时,有时对td设置的宽度是无效的,td宽度始终有内部的内容撑开,可以设置padding,但直接设置width却无效,下面我们来具体看下这个示例: 复制代码代码如下:
<td width=”100px” xss=removed>1000800td> <td>1000000td> <td>1000000td> <td>1000000td> <td>10000300td> <td>1000000td> </table
一开始的需求只是表头部分在滚动时能一直固定在头部,那关键要实现的就是让tr能定位。 首先想到的方法是给tr设置relative,用ie6/7测试以下代码: Code 1 2 3 4 给tr设置relative后就能相对table定位了,看来很简单啊,但问题是这个方法ie8和ff都无效,而且存在很多问题,所以很快就被抛弃了。 ps:该效果用来做tr的拖动会很方便。 接着想到的是给table插入一个新tr,克隆原来的tr,并设置这个tr为fixed(ie6为absolute),例如: Code 1 2 3 4 5 6 第一个问题是fixed的tr在ie7中不能进行定位,而且td在定位后并不能保持在表格中的布局,这样在原表格插tr就没意义了。 ps:fixed的相关应用可参考仿LightBox效果。 最后我用的方法是新建一个table,并把源tr克隆到新table中,然后通过对新table定位来实现效果。 用这个方法关键有两点,首先要做一个仿真度尽可能高的tr,还有是要准确的定位,这些请看后面的程序说明。 程序说明 【克隆table】 克隆一个元素用cloneNode就可以了,它有一个bool参数,表示克隆是否包含子节点。 程序第一步就是克隆原table: this._oTable = $(table);//源table this._nTable = this._oTable.cloneNode(false);//新table this._nTable.id = "";//避免id冲突 要注意虽然ie的cloneNode参数是可选的(默认是false),但在ff是必须的,建议使用时都写上参数。 还要注意的是id属性也会被克隆,也就是克隆后会有两个相同id的元素(如果克隆对象有设置的话),这很容易会导致其他问题,程序会把克隆table的id属性设空。 ps:table请用class来绑定样式,用id的话新table就获取不了样式了。 克隆之后再设置样式: this._style.width = this._oTable.offsetWidth + "px"; this._style.position = isIE6 ? "absolute" : "fixed"; this._style.zIndex = 100; 一般来说offsetWidth是width+padding+border的结果,但table比较特别,测试下面的代码: Code TD XHTML 1.0 Tra

61,129

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧