时间戳

首页 > 解决方案 > 防止 Flexbox 变大，截断文本

html - 防止 Flexbox 变大，截断文本

问题描述

希望有人可以帮助我，我正在尝试创建一个拆分视图显示，屏幕的左半部分是全高，右侧被分成四等分。在左列中会有多行文本被分成列，如果超过列宽，每一列的内容应该被截断，同样的效果应该在右手边的 4 个四分之一处。无论我做什么，如果内容溢出，四分之一的宽度就会增加。这是我的原始代码...

<!DOCTYPE html>
<html>

<head>
  <title>"Active Work</title>
  <style>
    * {
      box-sizing: border-box;
    }
    
    body {
      display: flex;
      min-height: 100vh;
      flex-direction: row;
      margin: 0;
    }
    
    .container {
      width: 100%;
      background: #D7E8D4;
      display: flex;
      min-height: 100vh;
      flex-direction: row;
      margin: 0;
    }
    
    .colLeft {
      width: 50%;
      background: blue;
      min-height: 100vh;
    }
    
    .colRight {
      width: 50%;
      background: green;
      min-height: 100vh;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }
    
    .grid {
      height: 50vh;
      flex: 0 0 50%;
    }
    
    .rowFlex {
      display: flex;
      flex-direction: row;
      line-height: 36px;
    }
    
    .btn1 {
      padding: 5px;
      background-color: #00796b;
      border-radius: 5px;
      max-height: 30px;
      margin: 0px 5px;
    }
    
    .gridHeader {
      width: 100%;
    }
    
    .truncate {
      overflow: hidden;
      white-space: nowrap;
      flex-wrap: nowrap;
      flex: 0 0 50%;
      background-color: yellow;
      text-overflow: ellipsis;
    }
    
    .spanDiv {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      flex: 1;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="colLeft">

      <div class="rowFlex">
        <div>Some Text</div>
        <div class="btn1">G1</div>
        <div class="btn1">G2</div>
        <div class="btn1">G3</div>
        <div class="btn1">G4</div>

      </div>

    </div>

    <div class="colRight">
      <div class="grid" style="background-color:#ff8a80;">
        <div class="rowFlex">
          <div class="gridHeader">GROUP1</div>
        </div>
        <div class="rowFlex">
          <div class="truncate">LCT-56477</div>
          <div class="truncate"><span class="spanDiv">LCT-5647 cvvfvdfgdfgdfgdfgfdvhjghjghjghfvfvfv7-</span></div>
        </div>


      </div>
      <div class="grid" style="background-color:#7b1fa2;">2</div>
      <div class="grid" style="background-color:#64b5f6;">3</div>
      <div class="grid" style="background-color:#80cbc4;">4</div>

    </div>


  </div>
</body>

</html>

标签： htmlcssflexbox

解决方案

只需添加min-width:0到您的.grid班级。

* {
  box-sizing: border-box;
}

body {
  display: flex;
  min-height: 100vh;
  flex-direction: row;
  margin: 0;
}

.container {
  width: 100%;
  background: #D7E8D4;
  display: flex;
  min-height: 100vh;
  flex-direction: row;
  margin: 0;
}

.colLeft {
  width: 50%;
  background: blue;
  min-height: 100vh;
}

.colRight {
  width: 50%;
  background: green;
  min-height: 100vh;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.grid {
  height: 50vh;
  flex: 0 0 50%;
  min-width: 0;
}

.rowFlex {
  display: flex;
  flex-direction: row;
  line-height: 36px;
}

.btn1 {
  padding: 5px;
  background-color: #00796b;
  border-radius: 5px;
  max-height: 30px;
  margin: 0px 5px;
}

.gridHeader {
  width: 100%;
}

.truncate {
  overflow: hidden;
  white-space: nowrap;
  flex-wrap: nowrap;
  flex: 0 0 50%;
  background-color: yellow;
  text-overflow: ellipsis;
}

.spanDiv {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
<div class="container">
  <div class="colLeft">

    <div class="rowFlex">
      <div>Some Text</div>
      <div class="btn1">G1</div>
      <div class="btn1">G2</div>
      <div class="btn1">G3</div>
      <div class="btn1">G4</div>

    </div>

  </div>

  <div class="colRight">
    <div class="grid" style="background-color:#ff8a80;">
      <div class="rowFlex">
        <div class="gridHeader">GROUP1</div>
      </div>
      <div class="rowFlex">
        <div class="truncate">LCT-56477</div>
        <div class="truncate"><span class="spanDiv">LCT-5647 cvvfvdfgdfgdfgdfgfdvhjghjghjghfvfvfv7-</span></div>
      </div>


    </div>
    <div class="grid" style="background-color:#7b1fa2;">2</div>
    <div class="grid" style="background-color:#64b5f6;">3</div>
    <div class="grid" style="background-color:#80cbc4;">4</div>

  </div>


</div>

推荐阅读