Tenho um card de largura variável (no exemplo deixei fixo) com um texto alinhado a esquerda e um botão alinhado a direita na mesma linha, queria que o texto ocupasse toda a largura disponível em uma única linha e, se ultrapassar o máximo, cortar com elipses
Consigo organizar o conteúdo da forma que quero com flexbox ou aplicar o efeito de elipses, porém não consigo fazer ambos juntos:
.card {
display: inline-block;
width: 150px;
margin: 16px;
padding: 16px;
background: green;
}
.card > div {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
}
.card > div > div > span {
display: block;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
<div class="card">
<p>MAIS CONTEÚDO</p>
<div>
<div>
<span>título</span>
<span>subtítulo</span>
</div>
<button>X</button>
</div>
<p>MAIS CONTEÚDO</p>
</div>
<div class="card">
<p>MAIS CONTEÚDO</p>
<div>
<div>
<span>texto texto texto texto texto</span>
<span>subtítulo</span>
</div>
<button>X</button>
</div>
<p>MAIS CONTEÚDO</p>
</div>
É possível fazer isso sem JS?