it-swarm.com.de

Wie kann ein Flex-Artikel aufgrund seines Textes nicht überlaufen?

Ich habe das folgende Layout für eine Liste im Auge. Jedes Listenelement wird durch zwei Spalten dargestellt. Die zweite Spalte sollte den gesamten verfügbaren Speicherplatz belegen, sollte jedoch mit der Mindestgröße nach rechts verankert werden, wenn die erste Spalte zu viel Speicherplatz beansprucht. Die erste Spalte sollte dann eine Ellipsis anzeigen.

Das Problem tritt in diesem letzten Fall auf. Wenn die erste Spalte aus zu viel Text besteht, wird anstelle einer Ellipse eine Streckung aus der Flexbox ausgeführt, wodurch eine horizontale Bildlaufleiste angezeigt wird. Die zweite Spalte ist nicht rechts verankert.

Ich möchte es so rendern lassen (Mockup):

Expected rendering

Wie kann ich das erreichen?

Dies ist Musterfiedel .

.container {
    display: -webkit-flex;
}

div {
    white-space: nowrap;
    text-overflow: Ellipsis;
}

.container > div:last-child {
    -webkit-flex: 1;
    background: red;
}
<!-- a small first column; the second column is taking up space as expected -->
<div class="container">
    <div>foo barfoo bar</div>
    <div>foo bar</div>
</div>

<!-- a large first column; the first column is overflowing out of the flexbox container -->
<div class="container">
    <div>foo barfoo barfoo barfoo barfoo barfoo barfoo bar
    foo barfoo barfoo barfoo barfoo barfoo barfoo bar
    foo barfoo barfoo barfoo barfoo barfoo barfoo bar</div>
    <div>foo bar</div>
</div>

64
pimvdb

AKTUALISIEREN

Code hinzufügen, der funktioniert:

.container {
    display: -webkit-flex; 
}

.container>div:first-child{
    white-space:nowrap;
   -webkit-order:1;
   -webkit-flex: 0 1 auto; /*important*/
    text-overflow: Ellipsis;
    overflow:hidden;
    min-width:0; /* new algorithm overrides the width calculation */
}

.container > div:last-child {
    -webkit-flex: 1;
    -webkit-order:2;
    background: red;
    -webkit-flex:1 0 auto; /*important*/
}
.container > div:first-child:hover{
    white-space:normal;
}
<div class="container">
    <div>foo barfoo bar</div>
    <div>foo bar</div>
</div>

<div class="container">
        <div>foo barfoo barfoo barfoo barfoo barfoo barfoo bar
        foo barfoo barfoo barfoo barfoo barfoo barfoo bar
        foo barfoo barfoo barfoo barfoo barfoo barfoo bar</div>
    <div>foo bar</div>
</div>
<div class="container">
    <div>foo barfoo bar</div>
    <div>foo bar</div>
</div>

<div class="container">
        <div>foo barfoo barfoo barfoo barfoo barfoo barfoo bar
        foo barfoo barfoo barfoo barfoo barfoo barfoo bar
        foo barfoo barfoo barfoo barfoo barfoo barfoo bar</div>
    <div>foo bar</div>
</div><div class="container">
    <div>foo barfoo bar</div>
    <div>foo bar</div>
</div>

Ursprüngliche Antwort/Erklärung.

In der W3C-Spezifikation heißt es: "Standardmäßig werden Flex-Elemente nicht unter ihre minimale Inhaltsgröße (Länge des längsten Word- oder Elements mit fester Größe) verkleinert. height -Eigenschaft. "

Wenn wir dieser Argumentation folgen, glaube ich, dass der Fehler von Canary entfernt wurde, nicht umgekehrt. 

Sobald ich min-width in 0 gestellt habe, funktioniert es in Canary. 

In älteren Implementierungen gab es also einen Fehler, und Canary entfernt diesen Fehler.

Dieses Beispiel arbeitet auf Kanarienvogel. http://jsfiddle.net/iamanubhavsaini/zWtBu/

Ich habe Google Chrome Version 23.0.1245.0 Canary verwendet.

112
user900360

Sie können die bevorzugte Größe des untergeordneten Objekts festlegen, indem Sie den dritten Wert der flex-Eigenschaft auf auto setzen.

flex: 1 0 auto;

Dies ist eine Abkürzung für das Setzen der flex-basisproperty .

( Beispiel )

Wie in den Kommentaren erwähnt, scheint dies in Chrome Canary jedoch nicht zu funktionieren, obwohl ich nicht sicher bin, warum.

8
Marcus Stade

Update: Dies ist nicht die Antwort. Es löst ein anderes Problem und war ein Schritt, um die richtige Antwort zu finden. Also behalte ich es aus historischen Gründen. Bitte stimmen Sie nicht darüber ab.

Ich glaube, das ist Ihre Antwort: http://jsfiddle.net/iamanubhavsaini/zWtBu/2/

enter image description here

siehe W3C

für das erste Element

-webkit-flex: 0 1 auto; /* important to note */

und für das zweite Element

-webkit-flex:1 0 auto; /* important to note */

sind die Eigenschaften und Werte, die den Trick machen.

Weitere Informationen finden Sie unter http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/#flex


und so kehren Sie die Reihenfolge um: http://jsfiddle.net/iamanubhavsaini/zWtBu/3/

und dies mit der vordefinierten Mindestbreite des rot hinterlegten Dinges: http://jsfiddle.net/iamanubhavsaini/zWtBu/1/

2
user900360

Update: Dies ist nicht die Antwort. Es löst ein anderes Problem und es war ein Schritt auf dem Weg zur richtigen Antwort. Ich halte es also aus historischen Gründen. Bitte stimmen Sie nicht darüber ab.

EDIT 2: Diese Antwort löst das Problem nicht. Es gibt einen subtilen Unterschied zwischen dem Ziel der Frage und der Antwort. 

Zunächst arbeitet text-overflow:Ellipsis mit overflow:hidden. Tatsächlich funktioniert es auch mit etwas anderem als overflow:visible . Ref

Dann wiederholen Sie durch:

http://jsfiddle.net/iamanubhavsaini/QCLjt/8/

Hier habe ich overflow und max-width Eigenschaften gesetzt. Mit max-width:60%; und overflow:hidden werden die Dinge so angezeigt, wie Sie es beabsichtigt haben, da hidden die Anzeige des Textes unterbindet und 60% die Box mit einer bestimmten Größe erstellt, falls zu viele Textdaten vorhanden sind.

Wenn Sie sich wirklich für flex box model interessieren, können Sie Folgendes über -webkit-order herausfinden. 

http://jsfiddle.net/iamanubhavsaini/QCLjt/9/

--Code--

<div class="container">
    <div>foo barfoo bar</div>
    <div>foo bar</div>
</div>

<div class="container">
        <div>foo barfoo barfoo barfoo barfoo barfoo barfoo bar
        foo barfoo barfoo barfoo barfoo barfoo barfoo bar
        foo barfoo barfoo barfoo barfoo barfoo barfoo bar</div>
    <div>foo bar</div>
</div>

Betroffene CSS

.container {
    display: -webkit-flex;
}

div {
    white-space: nowrap;
    text-overflow: Ellipsis;
    overflow:hidden;
}
.container>div:first-child{
   -webkit-order:1;
        -webkit-flex: 1;
}
.container > div:last-child {
    -webkit-flex: 1;
    -webkit-order:2;
    background: red;
}

Es gibt keine Breite und trotzdem funktioniert es. Und das sehe ich. 

enter image description here

--nach dem Kommentar

-webkit-Reihenfolge: N; ist das, was wir nach mehr als zwei Jahren anstelle von float:---; und viel mehr Hacks verwenden werden (wenn W3C auf diesem Kurs bleibt und auch wenn jeder Browser-Anbieter folgt) 

hier ist die Reihenfolge 1 für das linke div und 2 für das rechte div. also sind sie links-rechts.

http://jsfiddle.net/iamanubhavsaini/QCLjt/10/

gleiches hier, aber nur wenn Sie nach Rechts-Links suchen, ändern Sie einfach die Reihenfolge der Dinge als div>first-child { -webkit-order:2; } div>last-child{-webkit-order:1;}.

HINWEIS: Diese -webkit-flex-Vorgehensweise macht diesen Code offensichtlich für andere Engines unbrauchbar. Für die Wiederverwendung von Code auf mehreren Browser-Engines sollte floating verwendet werden.

unten sind einige JS-Beispiele; das beantwortet die Frage -nach dem Kommentar nicht

Ich denke, das beantwortet Ihre Frage und viele weitere werden folgen. Es gibt einige andere Wege und andere Lösungen, aber nicht genau die Lösung für diese Frage . http://jsfiddle.net/iamanubhavsaini/vtaY8/1 /http://jsfiddle.net/iamanubhavsaini/9z3Qr/3/http://jsfiddle.net/iamanubhavsaini/33v8g/4/http://jsfiddle.net/iamanubhavsaini/33v8g/1/

0
user900360

für Mozilla sollten Sie "min-width: 1px;" 

0
goksel

Dieses Beispiel hat mir wirklich geholfen: http://jsfiddle.net/laukstein/LLNsV/

container {
    display: -webkit-flex;
    -webkit-flex-direction: row;
    padding: 0;
    white-space: nowrap;
}

.container>div {
    overflow: hidden;
    display: inline-block;
    -webkit-flex: 1;
    min-width: 0;
    text-overflow: Ellipsis;
    -moz-box-sizing: border-box;
         box-sizing: border-box;
}
0
Con Antonakos