时间戳

首页 > 解决方案 > `display: table-cell` div 忽略`overflow: hidden`

javascript - `display: table-cell` div 忽略`overflow: hidden`

问题描述

我试图通过在DOM 元素上定义一个width属性来限制列的宽度。div.dcolumn但是，由于某种原因，这似乎不适用于溢出的单元格。我希望隐藏溢出的单元格的内容（例如9px列）并根据指定的宽度值保留布局。我有哪些选择？

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html style='height:100%'>
       <head>
          <style>
            .header {
              background-color: #eeeeee;
              padding: 0 0 0 0;
              border: 1px solid #cccccc;
              cursor: default;
              -webkit-touch-callout: none;
              -webkit-user-select: none;
              -khtml-user-select: none;
              -moz-user-select: none;
              -ms-user-select: none;
              -o-user-select: none;
              user-select: none;
              overflow: hidden;
            }
    
            .dtable {
              display: table;
              position: relative;
              table-layout: fixed;
            }
            .drow {
              display: table-row;
            }
            .dcell {
              display: table-cell;
              overflow: hidden;
              padding: 0 0 0 0;
              border: 1px solid #cccccc;
              cursor: default;
            }
            .dcolumn {
              display: table-column;
            }
          </style>
       </head>
       <body>
          <div class="dtable" style="top: 0px; left: 0px; height: 125px;">
             <div class="dcolumn" style="width: 39px;"></div>
             <div class="dcolumn" style="width: 19px;"></div>
             <div class="dcolumn" style="width: 9px;"></div>
             <div class="dcolumn" style="width: 39px;"></div>
             <div class="dcolumn" style="width: 19px;"></div>
             <div class="drow header" style="height: 25px;">
                <div class="dcell">0</div>
                <div class="dcell">1</div>
                <div class="dcell">2</div>
                <div class="dcell">3</div>
                <div class="dcell">4</div>
             </div>
             <div class="drow" style="height: 25px;">
                <div class="dcell">0:0</div>
                <div class="dcell">0:1</div>
                <div class="dcell">long line not truncated</div>
                <div class="dcell">0:3</div>
                <div class="dcell">0:4</div>
             </div>
             <div class="drow" style="height: 25px;">
                <div class="dcell">1:0</div>
                <div class="dcell">1:1</div>
                <div class="dcell">1:2</div>
                <div class="dcell">1:3</div>
                <div class="dcell">1:4</div>
             </div>
          </div>
       </body>
    </html>

标签： javascripthtmlcss

解决方案

在这里，我添加了一个用于获得省略号效果的<span>内部.dcell，因为它不会直接在.dcell. .dcell在这种情况下还添加了宽度25px。

这应该适合你。

.header {
  background-color: #eeeeee;
  padding: 0 0 0 0;
  border: 1px solid #cccccc;
  cursor: default;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  overflow: hidden;
}

.dtable {
  display: table;
  position: relative;
  table-layout: fixed;
}

.drow {
  display: table-row;
}

.dcell {
  display: table-cell;
  overflow: hidden;
  width: 25px;
  padding: 0 0 0 0;
  border: 1px solid #cccccc;
  cursor: default;
}

.dcolumn {
  display: table-column;
}

.cell-data {
  display:block;
  width:inherit;
  overflow: hidden;
  white-space: nowrap; 
  text-overflow: ellipsis;
}
<div class="dtable" style="top: 0px; left: 0px; height: 125px;">
  <div class="dcolumn" style="width: 39px;"></div>
  <div class="dcolumn" style="width: 19px;"></div>
  <div class="dcolumn" style="width: 9px;"></div>
  <div class="dcolumn" style="width: 39px;"></div>
  <div class="dcolumn" style="width: 19px;"></div>
  <div class="drow header" style="height: 25px;">
    <div class="dcell">0</div>
    <div class="dcell">1</div>
    <div class="dcell">2</div>
    <div class="dcell">3</div>
    <div class="dcell">4</div>
  </div>
  <div class="drow" style="height: 25px;">
    <div class="dcell">0:0</div>
    <div class="dcell">0:1</div>
    <div class="dcell">
      <span class="cell-data">long line not truncated</span></div>
    <div class="dcell">0:3</div>
    <div class="dcell">0:4</div>
  </div>
  <div class="drow" style="height: 25px;">
    <div class="dcell">1:0</div>
    <div class="dcell">1:1</div>
    <div class="dcell">1:2</div>
    <div class="dcell">1:3</div>
    <div class="dcell">1:4</div>
  </div>
</div>

推荐阅读