我表中的一列可以包含没有空格的长文本.如何将宽度限制为150px?我不希望它总是150px(如果它是空的它应该是窄的),但是如果有一个长文本我希望它被限制为150px和要包装的文本.
这是一个测试示例:http://jsfiddle.net/Kh378/(让我们限制第3列).
先感谢您.
更新:
设置此样式:
word-wrap: break-word;
max-width: 150px;
Run Code Online (Sandbox Code Playgroud)
在IE8中不起作用(在不同的计算机上测试),我想它在任何版本的IE中都不起作用.
我有一个表,我想定义min-width和max-height属性.见下面的例子.
我现在的问题是浏览器不接受它.如果我在td它上面定义它会被忽略,如果我在div元素内部的td元素中定义它,内容具有正确的最小和最大宽度,但表仍然具有相同的大小.(所以有很多可用空间:/)
我该如何解决这个问题?
编辑:我刚刚注意到问题似乎只发生在表格处于全屏模式时.然而,元素不应超过最大宽度!
例:
<html>
<head>
<style type="text/css">
td {
border: 1px solid black;
}
html,body,.fullheight {
height: 100%;
width: 100%;
}
.minfield {
max-width: 10px;
border: 1px solid red;
overflow: hidden;
}
</style>
</head>
<body>
<table class="fullheight">
<tr>
<td class="minfield">
<div class="minfield">
<p>hallo</p>
</div>
</td>
<td><p>welt</p></td>
</tr>
</table>
</body>
</html>
Run Code Online (Sandbox Code Playgroud) 我观察到一种好奇心,当应用于表格单元格时,浏览器(至少:Chrome,Firefox和Safari)如何处理max-width和width属性:如果单元格包含一个巨大的单词,那么width如果它尝试,则该属性将不会被尊重将单元格的宽度设置为小于包含单词所需的宽度.
也就是说,如果我写这个HTML,其中第一个表width的100px为100px,第二个表的100px max-width为100px,并且都包含一个巨大的单词,那么第一个表格渲染得非常宽,第二个表格被限制为100px:
<style>
td {
border: 1px solid; /* To help visualisation */
word-wrap: break-word;
}
</style>
<table>
<tr>
<td style="width:100px">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
</tr>
</table>
<table>
<tr>
<td style="max-width: 100px">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
</tr>
</table>
Run Code Online (Sandbox Code Playgroud)
为什么会这样?width在这种情况下应该受到尊重吗?是width和max-width浏览器之间的行为差异,还是由规范决定?在定义瞄了一眼width,并max-width在CSS 2级规范,CSS内在外在和浆纱模块级别3(下面的链接)似乎并没有立即表明在任何情况下都max-width应该得到尊重,但width忽视; 我错过了什么吗?
规格链接: