Flex-Layout realisiert linken Textüberlauf und lässt rechte Textanpassung aus

Ich möchte eine Situation erreichen, in der die Breite des Textes auf der linken Seite automatisch entsprechend der Länge des Textes angepasst werden kann. Wenn eine Zeile nicht angezeigt werden kann, wird der Platz für den Text auf der rechten Seite nicht eingeengt und der Text auf der linken Seite läuft über und wird weggelassen. Wenn der Text rechts länger wird, wird der Text rechts vollständig angezeigt, während der Text links gequetscht wird und überläuft, was den Effekt hat, dass er weggelassen wird. Was ich gesagt habe, ist vielleicht nicht ganz klar. Schauen wir uns das Effektbild an.

1. Die Breite des Textes auf der rechten Seite ist dieselbe wie die des Textes auf der rechten Seite, und die linke Seite nimmt standardmäßig den gesamten verbleibenden Platz ein.

2. Die Breite des Textes rechts ist gleich 1. Der Text auf der linken Seite ist sehr lang und läuft über.

3. Der Text links ist derselbe wie bei 2, aber dem Text rechts wurden zwei „rechts“ hinzugefügt.

Unten ist der Stil:

.Fußzeile {
  Breite: 300px;
  Höhe: 20px;
  Anzeige: Flex;
  Überlauf: versteckt;
}
.links {
  Hintergrund: #3cc8b4;
  flex: 1 1 auto;
  Überlauf: versteckt;
  Textüberlauf: Auslassungspunkte;
  Leerzeichen: Nowrap;
  Mindestbreite: 50px;
}
.Rechts {
  Hintergrund: #9bc;
  maximale Breite: 250px;
}
.rechte Auslassungspunkte {
  Überlauf: versteckt;
  Textüberlauf: Auslassungspunkte;
  Leerzeichen: Nowrap;
}

<div Klasse="Fußzeile">
   <div Klasse="links">
     linkslinkslinkslinkslinkslinkslinkslinkslinkslinkslinks
  </div>
  <div Klasse="rechts">
    <div Klasse="rechte Auslassungspunkte">
      rechtsrechtsrechtsrechtsrechtsrechtsrechts
    </div>
  </div>
</div>

Der Code fügt die maximale Breite, die minimale Breite und ein Div namens „Right Ellipsis“ hinzu. Um folgende Effekte zu erzielen:

Wir können je nach Bedarf unterschiedliche Effekte erzielen. Zusammenfassung der Designanforderungen: Die Breite auf der linken Seite wächst automatisch, die Breite auf der rechten Seite wächst automatisch und kann nicht überlaufen oder weggelassen werden. Wenn die Länge des linken Textes den Grenzwert überschreitet, läuft der linke Text über und wird weggelassen. Die Wirkung ist wie folgt:

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.