如果一行不适合，请整列

Question

我希望能够包装所有.row-value的div，只要其中一个不适合.row-label插入一行。正如您在下面的屏幕快照中看到的那样，“车辆”标签包装得很好，但是我想看到的是，如果最长的标签不合适，另外两个标签也会同时包装。

我一直在搜索，并花了几个小时自己尝试解决它……没有任何实际进展。我尝试了表和列块（它们无法正常工作，因为它们使我的值远离标签）。

理想情况下，我想实现这一目标

您能指出我正确的方向吗？我真的被卡住了。

.wrapping-table {
  width: 50%;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.row-label {
  font-weight: bold;
}

.row-value {
  margin-left: auto;
}

<div class="wrapping-table">
  <div class="row">
    <div class="row-label">Type</div>
    <div class="row-value">This is a really long text</div>
  </div>
  <div class="row">
    <div class="row-label">Name</div>
    <div class="row-value">Short name</div>
  </div>
  <div class="row">
    <div class="row-label">Vehicle</div>
    <div class="row-value">Vehicle with a really really long name</div>
  </div>
</div>

Answer 1

使用jquery对我有用。检查这是否是您想要的。 我使用了@Sumit Patel代码。

jquery

COPY

css

$('.row-value').each(function() {
  var content = $(this).width();
  var sibling = $(this).prev('.row-label').width();
  var row = $(this).parent('.row').width();

  if((content+sibling)>row){
     $('.row-value').addClass("wrap");
     return false;
  }

});

Answer 2

您可以使用jquery实现此检查代码段。完成某些工作后，您可以添加类，然后将其包装。

var showChar = 100;
$('.row-value').each(function() {
  var content = $(this).html();

  if (content.length > showChar) {

    $(this).addClass("wrap");

  }

});

.wrapping-table {
  width: 50%;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.row-label {
  font-weight: bold;
}

.row-value {
  margin-left: auto;
}

.wrap {
  flex-basis: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapping-table">
  <div class="row">
    <div class="row-label">Type</div>
    <div class="row-value">This is a really long text</div>
  </div>
  <div class="row">
    <div class="row-label">Name</div>
    <div class="row-value">Short name</div>
  </div>
  <div class="row">
    <div class="row-label">Vehicle</div>
    <div class="row-value">Vehicle with a really fgdfg sdfgsfgdreally lonfgfg sfdg sfg name</div>
  </div>
</div>