CSS Text Überlauf Ellipsen mit mehreren Elementen

Question

Hier ist, was ich tun möchte:

1. einen Text und eine Schaltfläche auf der gleichen Linie halten und in der Mitte
2. ausrichten Wenn die Bildschirmgröße zu reduzieren, halten Sie immer auf die Schaltfläche zeigt, während Text-Überlauf: Auslassungs Wirksam

Was ich bisher tat die Schaltfläche zeigt sich nicht halten können. Ellipse beginnt erst zu arbeiten, wenn die Fensterkante den Text erreicht.

HTML:

<div class="wrapper"> 
    <span> 
    foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar 
    </span> 
    <button type="button">Download</button> 
</div> 

CSS:

.wrapper { 
    text-align: center; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
    background-color: #b3ffcb; 
} 

JSFiddle Demo

Wer weiß, wie dieses Problem beheben?

Answer 1

Sie Flexbox auf Wrapper verwenden und anwenden können text-overflow: ellipsis auf spanFiddle

.wrapper { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    background-color: #b3ffcb; 
 
} 
 
span { 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
}

<div class="wrapper"> 
 
    <span>foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar </span> 
 
    <button type="button">Download</button> 
 
</div>