那些遇到过的问题

为什么溢出:隐藏不能在<td>中工作？

mik*_*ike 143 html css

我有一个表格单元格,我总是希望它是一个特定的宽度.但是,它不适用于大字符串的非空格文本.这是一个测试用例:

td {
  border: solid green 1px;
  width: 200px;
  overflow: hidden;
}
Run Code Online (Sandbox Code Playgroud) 
<table>
  <tbody>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
  </tbody>
</table>
Run Code Online (Sandbox Code Playgroud)

如何在框的边缘切除文本,而不是让框展开？

Joh*_*yre 198

这是同样的问题.

需要设置table-layout:fixed 和表元件上的合适的宽度,以及overflow:hidden和white-space: nowrap在桌子上的细胞.

例子

固定宽度列

表格的宽度必须与固定宽度单元格相同(或更小).

使用一个固定宽度的列:

* {
  box-sizing: border-box;
}
table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
  max-width: 100px;
}
td {
  background: #F00;
  padding: 20px;
  overflow: hidden;
  white-space: nowrap;
  width: 100px;
  border: solid 1px #000;
}
Run Code Online (Sandbox Code Playgroud) 
<table>
  <tbody>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
  </tbody>
</table>
Run Code Online (Sandbox Code Playgroud)

使用多个固定宽度列:

* {
  box-sizing: border-box;
}
table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
  max-width: 200px;
}
td {
  background: #F00;
  padding: 20px;
  overflow: hidden;
  white-space: nowrap;
  width: 100px;
  border: solid 1px #000;
}
Run Code Online (Sandbox Code Playgroud) 
<table>
  <tbody>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
  </tbody>
</table>
Run Code Online (Sandbox Code Playgroud)

固定和流体宽度的列

必须设置表格的宽度,但任何额外的宽度都可以由流体单元格完成.

具有多个柱,固定宽度和流体宽度:

* {
  box-sizing: border-box;
}
table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
}
td {
  background: #F00;
  padding: 20px;
  border: solid 1px #000;
}
tr td:first-child {
  overflow: hidden;
  white-space: nowrap;
  width: 100px;
}
Run Code Online (Sandbox Code Playgroud) 
<table>
  <tbody>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
  </tbody>
</table>
Run Code Online (Sandbox Code Playgroud)

And*_*ord 20

这就是TD的方式.我相信这可能是因为TD元素的'display'属性固有地设置为'table-cell'而不是'block'.

在您的情况下,替代方案可能是在DIV中包装TD的内容并将宽度和溢出应用于DIV.

<td style="border: solid green 1px; width:200px;">
    <div style="width:200px; overflow:hidden;">
        This_is_a_terrible_example_of_thinking_outside_the_box.
    </div>
</td>
Run Code Online (Sandbox Code Playgroud)

可能会有一些填充或cellpadding问题需要处理,你最好删除内联样式并使用外部css,但这应该是一个开始.

小智 9

将CSS table-layout:fixed;(有时width:<any px or %>)应用于white-space: nowrap; overflow: hidden;TD上的TABLE和样式.然后在正确的单元格或列元素上设置CSS宽度.

值得注意的是,固定布局表格列宽由表格第一行中的单元格宽度决定.如果第一行中有TH元素,并且宽度应用于TD(而不是TH),则宽度仅适用于TD的内容(可以忽略白色空格和溢出); 无论设置的TD宽度如何,表格列都将均匀分布(因为没有指定[在第一行中的TH]上的宽度)并且列将具有[计算]相等的宽度; 该表不会根据后续行中的TD宽度重新计算列宽.设置表将遇到的第一个单元格元素的宽度.

或者,设置列宽的最安全方法是在表中使用<COLGROUP>和<COL>标记,并在每个固定宽度COL上设置CSS宽度.当表格预先知道列宽时,与单元格宽度相关的CSS会更好.

Oli*_*Oli 7

我不熟悉具体的问题,但你可以在td中粘贴一个div等,然后设置溢出.

小智 7

最佳解决方案是将 div 放入零宽度的表格单元格中。Tbody 表格单元格将从定义顶部的宽度继承其宽度。位置：相对和负边距应该可以解决问题！

这是截图：https : //flic.kr/p/nvRs4j

<body>
<!-- SOME CSS -->
<style>
    .cropped-table-cells,
    .cropped-table-cells tr td { 
        margin:0px;
        padding:0px;
        border-collapse:collapse;
    }
    .cropped-table-cells tr td {
        border:1px solid lightgray;
        padding:3px 5px 3px 5px;
    }
    .no-overflow {
        display:inline-block;
        white-space:nowrap;
        position:relative; /* must be relative */
        width:100%; /* fit to table cell width */
        margin-right:-1000px; /* technically this is a less than zero width object */
        overflow:hidden;
    }
</style>

<!-- CROPPED TABLE BODIES -->
<table class="cropped-table-cells">
    <thead>
        <tr>
            <td style="width:100px;" width="100"><span>ORDER<span></td>
            <td style="width:100px;" width="100"><span>NAME<span></td>
            <td style="width:200px;" width="200"><span>EMAIL</span></td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><span class="no-overflow">123</span></td>
            <td><span class="no-overflow">Lorem ipsum dolor sit amet, consectetur adipisicing elit</span></td>
            <td><span class="no-overflow">sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></td>
    </tbody>
</table>
</body>
Run Code Online (Sandbox Code Playgroud)

cle*_*tus 5

好了，这是为您提供的解决方案，但我真的不明白为什么会这样：

<html><body>
  <div style="width: 200px; border: 1px solid red;">Test</div>
  <div style="width: 200px; border: 1px solid blue; overflow: hidden; height: 1.5em;">My hovercraft is full of eels.  These pretzels are making me thirsty.</div>
  <div style="width: 200px; border: 1px solid yellow; overflow: hidden; height: 1.5em;">
  This_is_a_terrible_example_of_thinking_outside_the_box.
  </div>
  <table style="border: 2px solid black; border-collapse: collapse; width: 200px;"><tr>
   <td style="width:200px; border: 1px solid green; overflow: hidden; height: 1.5em;"><div style="width: 200px; border: 1px solid yellow; overflow: hidden;">
    This_is_a_terrible_example_of_thinking_outside_the_box.
   </div></td>
  </tr></table>
</body></html>
Run Code Online (Sandbox Code Playgroud)

即，将单元格内容包装在div中。

Arm*_*min 5

最简单有效的解决方案：

table { table-layout: fixed }

table td {     
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; 
}
Run Code Online (Sandbox Code Playgroud)

归档时间：

查看次数：

133860 次

最近记录：

6 年，3 月 前
CSS:约束一个具有长单元格内容到页面宽度的表格？ 21
如何设置<td>宽度以直观截断其显示的内容？ 20
更多相关链接
相关归档
如何使浮动div的父级100%高度？ 251
使用HTML按钮调用JavaScript函数 215
脚本和样式元素的HTML"nonce"属性的目的是什么？ 96
jQuery:向左滑动并向右滑动 27
将div与右侧的固定位置对齐 27
在Android中使用webview将网站注入CSS 27
bootstrap.css和bootstrap-combined.min.css有什么区别？ 21
在IE8中获得div的最后一个孩子？ 19
CSS样式嵌套 - 正确的形式？ 19
检测iframe是否为跨域的万无一失的方法 18
难疑归档
URI,URL和URN有什么区别？ 4217
如何从SQL Server中的SELECT更新？ 3546
设置JavaScript函数的默认参数值 2277
如何使div不大于其内容？ 1960
当键盘出现时 - 如何开始编辑时,如何让UITextField向上移动？ 1674
使用JavaScript在下拉列表中获取选定的值？ 1660
如何创建文件并用Java写入？ 1336
对于Android Studio项目,我的.gitignore应该是什么？ 1210
在对象名称之前单个和双下划线的含义是什么？ 1205
如何使用$ scope.$ watch和$ scope.$在AngularJS中申请？ 1076