Flexbox mit Platzproblemen

Delphinis · 20.02.2023

Hallo,
ich hab mir eine Seite für (schmale) Handys designt. Leider funktioniert da Flexbox nicht wie gewünscht.
Wenn ein Artikel einen längeren Namen hat, schiebt es Controls einfach hinten aus dem übergeordneten Modul hinaus!

Eine Lösung für dieses Problem sehe ich, in dem ein langer Eintrag gekürzt und mit ... erweitert wird. Z.B. so:

Das ist aber nur eine Fotomontage, das funktioniert eben noch nicht.
Ich habe mal mit flex-shrink: 1 versucht, dann bricht der Text aber um. Wenn ich ein <nobr> einsetze, dann ist das Verhalten wie vorher.
Ich komm also wahrscheinlich nicht um Java-Script herum. Weiss jemand wie man herausfindet, wann flexbox mittels flex-shrink anfängt umzubrechen?
Dann könnte man den Text entsprechend abändern. Oder hat flex-box da eine native Lösung?
Hier mal mein code:

HTML:

<div class="gr-box">
        <header class="gr-head">
          <h4 class="gr-head-txt">group.Grouppe 1</h4>
          <button class="gr-button gr-head-but"> ^ </button>
        </header>
            <div class="gr-entry">
            <input class="gr-entry-quant"; placeholder="1">
            <label class="gr-entry-name">Artikel 2 mit sehr sehr sehr langem Namen</label>
            <label class="gr-entry-price"><nobr>2,50)</nobr></label>
            <button class="gr-button gr-entry-but" type="button">x</button>
          </div>
      </div>

CSS

CSS:

  .gr-box {
      border: 3px solid green;
      border-radius: 0.5em 0.5em;
      margin-bottom: 0.2em;
      background-color: white
  }

  .gr-head {
      display: flex;
      margin: 0em;
      align-items: center;
      margin: 0.1em 0 0.1em 0.1em;
  }

  .gr-head-txt {
      color: green;
      margin-bottom: 0em;
      flex: 100
  }

  .gr-button {
      cursor: pointer;
      margin: 0 0.2em;
      border-radius: 0.3em 0.3em;
      max-width: 30px;
      min-width: 30px;
      height: 1.5em;
  }

  .gr-head-but {
      flex: 1;
  }

  .gr-entry {
      display: flex;
      border-top: 2px solid green;
      align-items: center;
      /*height: 2em;*/
      font: large bold;
  }

  .gr-entry-quant {
      max-width: 20px;
        min-width: 20px;
      border: 2px solid gray;
      border-radius: 0.3em 0.3em;
      margin: 0.1em;
      height: 1.5em;
      flex: 1;
      padding: 0.2em
  }

  .gr-entry-name {
      flex-basis: auto;
      flex-shrink: 1;
      line-height: 1em;
      margin: 5px 0;
      margin:.2em;
      line-height:1.5em;
  }

  .gr-entry-price {
      flex: 1;
      margin-right: 0.1em;
      float:right;
  }

  .gr-entry-but {
      flex: 1;
      float: right;
      background-color: lightcoral;
  }
</style>

Falls es eine Java-Lösung braucht: Bin mit Java script noch nicht so bewandert (lerne noch). Deshalb währe ein Beispiel schön.
Weiss da jemand Rat?

Werner123 · 20.02.2023

Ich habe das immer so gelöst:

Code:

  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

Delphinis · 20.02.2023

Super danke! Das funktioniert. Wieder was gelernt

.