表的表类,当它们过于宽泛地将所有单元格拆分为行时

Question

我试图弄清楚我需要什么样的HTML/CSS才能获得某种破坏行为,具体取决于可用的空间大小.基本上,我希望有一长串文本在某些地方自动中断,而且只有一个时间,当它不再有空间时.

例1:

• 整个文本行有足够的水平空间:

  

• 整条线没有足够的水平空间(但即使前两个项目有空间,一切都在自己的线上)

示例2:这与前一个示例相同,但它表明我也希望能够以嵌套方式使用它:

• 整个文本行有足够的水平空间:

  

• 整条线路没有足够的水平空间,因此每个单元都会进入自己的线路

  

• 第二个单元没有足够的水平空间

  

我正在寻找一种只使用HTML和CSS(或者只是非常轻松地使用JavaScript)的解决方案,因为我的预期用例是在自动生成的HTML文档页面中大量使用它.

我遇到喜欢的例子,这些,但我不知道我看到如何使这项工作子项(以及如何使这项工作不分配一个固定大小的每个细胞-我想小区大小来确定按其内容).

Clarfiying编辑

只是特别强调一个被忽视的问题的关键部分.我从不想发现自己处于一行中有两个项目而下一行有第三个项目的状态.这三个项目应该直接从一条线上的所有线条直接到另一条线条.

Answer 1

正如我在评论中已经说过的那样,如果不使用Javascript,OP无法实现的目标,所以这就是我想出的.

最初我们有一个普通的表结构,我们计算每个表的宽度并data-width在每个表上应用一个属性 - 父表或嵌套表.

在调整大小时,只要每个表长于窗口宽度,它就会将其内容显示从更改table-cell为block,从而堆叠所有子项.

一旦窗口宽度被扩展,它就会与每个表的data-width属性进行比较,当它适合时,它会扩展.

编辑:我认为由于某种原因它在某些情况下不起作用,但它确实有效,所以我删除了臃肿!

HTML:

<div class="table">
  <div class="cell">
    Content 1
  </div>
  <div class="cell">
    <div class="table">
      <div class="cell">
        Content 1
      </div>
      <div class="cell">
        Cont
      </div>
      <div class="cell">
        Content 3
      </div>    
    </div>
  </div>
  <div class="cell">
    Content 3Content 3Content 3
  </div>

</div>

CSS:

.table {
  display: table;
  border: 1px solid #e4e5e7;
  white-space: nowrap;
}

.cell {
  display: table-cell;
  vertical-align: middle;
  padding: 10px;
  border: 1px solid #e4e5e7;
}

.cell .table {
  margin-bottom: -2px;
}

.table.wrap {
  white-space: normal;
}

.table.wrap > .cell {
  display: block;
}

使用Javascript:

$('.table').each(function(i) {
  tw = 0;
  $(this).children('.cell').each(function() {
    tw += $(this).outerWidth(true);
  });
  $(this).attr('data-width', tw);
});

$(window).on('load resize', function() {
  w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
  $('.table').each(function(i) {
    if ($(this).width() >= w) {
      $(this).addClass('wrap');
    } else if (w >= $(this).attr('data-width')) {
      $(this).removeClass('wrap');    
    }
  });
}).resize();

这是一个工作小提琴

Answer 2

纯JS的另一个变种

window.addEventListener('load', collapse);
window.addEventListener('resize', collapse);

function collapse() {
  var parents = document.querySelectorAll('.parent');
  var children;
  var width;
  for (var i = 0; i < parents.length; i++) {
    parents[i].classList.remove('collapsed');
    width = 0;
    children = parents[i].children;
    for (var j = 0; j < children.length; j++) {
      width += children[j].offsetWidth;
    }
    if (width > parents[i].offsetWidth) {
      parents[i].classList.add('collapsed');
    }
  }
}

.parent,
.child {
  border: 1px solid gray;
  margin: 5px;
  padding: 5px;
}

.parent {
  display: flex;
  flex-wrap: wrap;
}

.collapsed {
  display: block;
}

.child {
  flex-grow: 1;
}

<div class="parent">
  <div class="child">Some thing one</div>
  <div class="parent child">
    <div class="child">Some inner</div>
    <div class="child">long thing</div>
    <div class="child">two</div>
  </div>
  <div class="child">Thing three</div>
</div>