Css 冲突要求：表列展开以填充可用空间，但也会截断文本_Css_Html Table

Css 冲突要求：表列展开以填充可用空间，但也会截断文本

css

Css 冲突要求：表列展开以填充可用空间，但也会截断文本,css,html-table,Css,Html Table,我有一个表，它有4个“固定”列和1到4个可变宽度列。为了简洁起见，将这些可变宽度列称为“attributes”——让我重复一下，直到运行时（实际上，直到我调用AJAX）我才知道有多少。使用并在固定列上设置“width”，在可变列上设置“minwidth”，我可以轻松完成所有这些工作。如果有超过可变宽度列所能容纳的文本，那么文本的包装就很好。但现在我的老板向我扔了一个弧线球。他希望它（有时）能够截断文本，而不是进行包装。我尝试为属性列的类添加以下内容： text-overflow: ellip

我有一个表，它有4个“固定”列和1到4个可变宽度列。为了简洁起见，将这些可变宽度列称为“attributes”——让我重复一下，直到运行时（实际上，直到我调用AJAX）我才知道有多少。使用

并在固定列上设置“width”，在可变列上设置“minwidth”，我可以轻松完成所有这些工作。如果有超过可变宽度列所能容纳的文本，那么文本的包装就很好。但现在我的老板向我扔了一个弧线球。他希望它（有时）能够截断文本，而不是进行包装。我尝试为属性列的

类添加以下内容：

  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;

那没什么用。因此，我将文本包装在属性列中的

中，并在div而不是tr上设置这些CSS参数，但现在发生的是，这些列变得足够大，可以容纳整个文本，而不是截断它，因此我最终得到一个数千像素宽的表，带有一个巨大的水平滚动条。那根本不是我想要的。我可以在div上设置一个固定的宽度，使文本被截断，但是我不能根据有多少列来调整它的大小。我试着在div上设置一个

宽度：20%

，但是我得到了一个很大的列，但是div只占20%，当然还有一个水平滚动条

是否有任何方法可以获得我想要的大小调整，或者我将被迫在加载时进行一些计算并相应地设置“宽度”

Fiddle:

您需要约束正在应用

文本溢出的同一元素的宽度，以使其正常工作。
假设表无法正确约束内容。如果尝试使用百分比宽度TD和DIV，它的宽度将超出您指定的范围
你能用这样的div吗
<!DOCTYPE HTML>
<html>
<head>
    <title>Clipped Text</title>
    <style>
    div#container{width:700px;}
    div.clipped{white-space:nowrap;overflow-x:hidden;width:14%;float:left;}
    </style>
</head>
<body>
<div id="container">
<div class="clipped">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
<div class="clipped">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
<div class="clipped">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
<div class="clipped">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
<div class="clipped">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
<div class="clipped">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
<div class="clipped">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>
</body>
</html>


剪辑文本
div#容器{宽度：700px；}
div.clipped{空白：nowrap；溢出-x:隐藏；宽度：14%；浮动：左；}
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作。
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作。
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作。
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作。
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作。
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作。
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作。
我已经把width=“100%”
放在桌子上了。我尝试将其更改为width=“940”
，但没有任何效果。您能否发布一个我们可以查看和修补的JSFIDLE？您正在使用文本溢出
，但未指定最大宽度
。必须将大小限制在应用文本溢出的同一元素上。在您的情况下，div
s似乎完全没有必要；您应该能够直接使用max width
和text overflow
设置td
的样式。正如我在问题中所说，我正在尝试调整东西的大小以适应可用空间，而在加载之前我不知道有多少空间。如果我设置了最大宽度，则表的宽度将不同，具体取决于我有多少属性列，但我的目标是使用整个屏幕宽度，而不管我有多少列。然后，您可以设置max width
的百分比，这将与表本身相关。如果您不确定将有多少属性列，那么您可能必须根据列数动态设置max width
，无论是在生成页面时还是在使用JavaScript加载页面时；表格数据应在表格中表示。