trungdq88 / css-flexbox-text-ellipsis Goto Github PK

  <div class="target">
    <div class="target-title">
      <div class="inner">
        Text here is very very long that it might
        get truncate if this box get resized too small
      </div>
    </div>
    <div class="target-button">
      Button
    </div>
  </div>

    .target {
      display: flex;
      width: 100%;
      justify-content: space-between;
      align-items: center;
    }

    .target-title {
      padding: 5px;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .inner {}

    .target-button {
      padding: 5px 10px;
      background: #2196F3;
      color: white;
    }

    .target {
      display: flex;
      width: 100%;
      justify-content: space-between;
      align-items: center;
    }

    .target-title {
      padding: 5px;
      min-width: 0;
    }

    .inner {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .target-button {
      padding: 5px 10px;
      background: #2196F3;
      color: white;
    }