Dynamische Breite float-left mit Ellipse

Ich habe einen einzeilenfesten Container div mit zwei variablen Breite span innen. Jeder Überlauf der ersten span sollte mit einer Ellipse ausgeblendet werden. Die zweite span schwimmt auf der rechten Seite und sollte vollständig angezeigt werden. Bitte beachten Sie this Fiddle:Dynamische Breite float-left mit Ellipse

<div class='container'> 
    <span class='left'>Long long variable stuff</span> 
    <span class='right'>Changing stuff</span> 
</div>

Ich möchte die erste span ‚s Breite dynamisch anzupassen entsprechend der Breite des zweiten span, so dass beide span Aufenthalt auf der gleichen Linie. Wie kann ich das machen?

Quelle

2016-04-18 Randomblue

können Sie Flexbox verwenden, so mit flex: 1 auf .right wird .left seine Größe und Überlauf ausgeblendet werden, anpassen.

.container { 
 
    width: 200px; 
 
    display: flex; 
 
    border: 1px solid black; 
 
} 
 
.left { 
 
    white-space: nowrap; 
 
    text-overflow: ellipsis; 
 
    overflow: hidden; 
 
} 
 
.right { 
 
    flex: 1; 
 
    white-space: nowrap; 
 
}

<div class='container'> 
 
    <span class='left'>Long long variable stuff</span> 
 
    <span class='right'>Changing stuff</span> 
 
</div>

Quelle

2016-04-18 17:25:37

Ihre Antwort nicht enthalten 'float: right'. Wenn ich es hinzufüge, schwimmt es nicht richtig. Irgendwelche Vorschläge? – Randomblue

Dies ist Flexbox, es gibt keine Schwimmer, Sie können hier mehr lesen https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes –

Haben Sie eine Lösung! Der gleiche Effekt kann durch Setzen von 'width: 100%' auf '.left' erreicht werden. – Randomblue

-1

Das glaube ich nicht, dass es eine Möglichkeit für CSS dynamisch ohne Javascript, um die Länge eines Elements zu kennen. Wenn Sie nach einer reinen CSS-Lösung suchen, müssen Sie ihr eine Richtung geben, damit sie die gewünschten Breiten kennt. Optisch kann das für Sie ein Kompromiss sein, aber Sie können sicherstellen, dass alles immer in einer Zeile ist.

Für die Lösung, die ich vorschlagen, um zu arbeiten, müssen Sie wissen, eine Breite der beiden. In diesem Fall werde ich sagen, dass Sie das "sich ändernde Zeug" auf der rechten Seite am besten erraten können.

Ihr erstes Problem ist, dass Spannen inline Elemente standardmäßig sind - nicht inline-block. Damit die Überlauftext-Eigenschaft funktioniert, müssen Sie sie mit einem inline-block oder block Element verwenden. Das nächste Stück ist calc zu verwenden. Calc schneidet gemischte Messungen ab, so dass Sie einen exakten Pixelwert von einem Prozentwert subtrahieren können. Dies funktioniert sehr gut für responsive Layouts.

Ich habe eine aktualisierte Version Ihres Plunker erstellt verdeutlichen: https://jsfiddle.net/n19ddahb/5/

Quelle

2016-04-18 17:43:14 sammyray

Dynamische Breite float-left mit Ellipse

Antwort

Verwandte Themen