Html Table类，用于在太宽时将所有单元格拆分为行的表

我正试图找出我需要什么HTML/CSS来获得某种破坏行为，这取决于可用空间的大小。基本上，我希望在没有空间的情况下，有一长行文本在某些地方自动断开，并且全部断开

示例1:

• 有足够的水平空间容纳整行文字：

• 整行没有足够的水平空间（但即使前两项有空间，所有内容都会在自己的行中结束）

示例2:这与前面的示例相同，但它表明我也希望能够以嵌套方式使用它：

• 有足够的水平空间容纳整行文字：

• 因为没有足够的水平空间容纳整行，所以每个单元格都位于自己的行上

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

我正在寻找一个只使用HTML和CSS的解决方案（或者只稍微使用JavaScript），因为我的预期用例是在自动生成的HTML文档页面中大量使用它

我遇到过这样的例子，但我不确定我看到了如何为子项执行此操作（以及如何在不为每个单元格指定固定大小的情况下执行此操作-我希望单元格大小由其内容确定）

分类编辑

---

只是把重点放在问题中被忽视的关键部分我从不希望自己处于一行有两个项目，下一行有第三个项目的状态。这三个项目应该从全部在一行直接转到全部在单独的行上。

正如我在评论中提到的，您可以使用flexbox，下面是您想要的演示。希望，这有帮助

.flex容器{
显示器：flex；
对齐项目：居中；
弯曲方向：行；
柔性包装：包装；
柔性流：行换行；
对齐内容：柔性端；
}
.弹性项目{
背景：灰色；
颜色：白色；
保证金：2倍；
高度：80px；
文本对齐：居中；
字体大小：30px；
边框：3倍纯黑；
}

某样东西
2点
随机数
大约4
五点左右

您可以使用display:flex

例如：

.horz_cont{
显示器：flex；
对齐项目：居中；
弯曲方向：行；
柔性包装：包装；
柔性流：行换行；
对齐内容：柔性端；
边框：1px实心#000；
填充：4px；
}
1.horz_cont.horz_cont{
边界：无；
填充：0；
}
.项目{
显示器：flex；
对齐项目：居中；
证明内容：中心；
保证金：4倍；
填充：4px；
高度：50px；
字体大小：34px；
字体大小：粗体；
边框：1px实心#000；
}

某件事
一些内在的
长话短说
二
第三件事

您可以尝试在屏幕大小上使用媒体查询，这样当中间flexbox的内部内容超过其容器时，您可以编写仅适用于该场景的CSS

将视口标记添加到html的头部也很重要：

全屏打开示例并调整浏览器视口的大小，以查看元素是如何弹出的

我希望这对你有帮助

干杯

.flex容器{
显示器：flex；
对齐项目：居中；
弯曲方向：行；
柔性包装：包装；
柔性流：行换行；
对齐内容：柔性端；
}
.flex项目，.内部flex项目{
背景：白色；
颜色：黑色；
填充物：5px；
保证金：2倍；
高度：100px；
文本对齐：居中；
线高：100px；
字体大小：50px；
边框：3倍纯黑；
}
@媒体屏幕和屏幕（最大宽度：1180px）{
.弹性项目{
宽度：80%；
}
@媒体屏幕和屏幕（最大宽度：640像素）{
.内部弹性件{
宽度：80%；
}

某样东西
一些内在的
长话短说
二
第三件事

一种方法是使用

@media

查询在

display: block

及

工作示例：

。长行{
显示：内联块；
宽度：200px；
左侧填充：4px；
字体大小：16px；
线高：32px；
边框：1px实心rgb（0,0,0）；
}
@仅介质屏幕和（最小宽度：801px）{
.长排{
显示：内联块；
浮动：左；
}
}
@仅介质屏幕和（最大宽度：800px）{
.长排{
显示：块；
边界顶部：无；
}
div:type.long-row的第一个{
边框顶部：1px实心rgb（0,0,0）；
}
}
@仅介质屏幕和（最大宽度：600px）{
.长排{
}
.短排{
显示：块；
左边距：-4px；
左侧填充：4px；
边框底部：1px实心rgb（0,0,0）；
}
跨度：最后一个类型。短行{
边框底部：无；
}
}

某件事
一些内在的
长话短说
二
第三件事

正如我在评论中所说的那样，如果没有Javascript的使用，OP想要的东西是无法实现的，所以下面是我的想法

最初我们有一个正常的表结构，我们计算每个表的宽度，并在每个表上应用

数据宽度

属性-父表或嵌套表

调整大小时，一旦每个表的长度超过窗口宽度，它就会将其内容显示从

表单元格

更改为

块

，从而堆叠所有子项

一旦窗口宽度被扩展，它就会与每个表的

数据宽度

属性进行比较，当它合适时，它就会扩展

编辑：出于某种原因，我认为它在某些情况下不起作用，但它确实起作用，所以我去掉了浮肿

HTML:

Javascr

display: inline-block

<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>

.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;
}

$('.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();