Uso di overflow del testo: ellissi; su un padre div quando il figlio è un input

Question

Sono presenti più elementi figlio non in linea, all'interno di un elemento padre che ha un set width e text-overflow impostato su ellipsis.

Quando l'ultimo figlio è un tag di ancoraggio, le ellissi funzionano correttamente, ma quando si tratta di un input, il testo si limita a clip. Poiché gli articoli precedenti sono di larghezza variabile, non posso impostare una larghezza massima ragionevole sull'ultimo input.

.parent { 
 
    width: 120px; 
 
    background: #eee; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
}

<div class="parent"> 
 
    <span class="child1"> 
 
    <a href="#">link 1</a> text 
 
    <a href="#">Lorem ipsum dolor</a> 
 
    </span> 
 
</div> 
 
<div class="parent"> 
 
    <span class="child1"> 
 
    <a href="#">link 2</a> text 
 
    <input type="submit" class="request-topic-link" value="lorem-ipsum-dolor">    
 
    </span> 
 
</div>

Qualche suggerimento? Ecco uno JSFiddle.

Answer 1

Bene, ecco cosa mi è venuto in mente. Ha bisogno di alcune modifiche al tuo markup, ma a parte questo funziona.

a) Il presentare ingresso può essere sostituito in modo sicuro con un pulsante presentare che è anche semantica e si può stile alle proprie esigenze. b) Il testo semplice deve essere avvolto all'interno di un span

Dal momento che si dispone di contenuto variabile, l'unico modo per farlo è quello di utilizzare table-cells ... avvolto all'interno di un table ovviamente. Usare table-layout:fixed farebbe il trucco SE il tuo contenuto non fosse di larghezza variabile. Questo è il motivo per cui ho aggiunto una larghezza del 33% a tutte le celle della tabella, che è solo un indicatore di cosa usare; le celle di tabella ignoreranno il valore impostato e si espanderanno di conseguenza e arbitrariamente a seconda del loro contenuto.

Ecco il markup aggiornato e un violino di lavoro: HTML:

<div class="parent"> 
    <span class="child1"> 
    <a href="#">link 1</a> text <a href="#">Lorem ipsum dolor</a>    </span> 
</div> 
<div class="parent"> 
    <span class="child1"> 
    <a href="#">link 1</a><span> textdfgg </span> 
    <button type="submit" class="request-topic-link">lorem-ipsum-dolor</button> 
    </span> 
</div> 

CSS:

.parent { 
    width: 120px; 
    background: #fff; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
    overflow: hidden; 
} 

.child1 { 
    display: table; 
    width: 100%; 
} 

.child1 > * { 
    display: table-cell; 
    width: 33%; 
} 

button { 
    text-overflow: ellipsis; 
    white-space: nowrap; 
    overflow: hidden; 
    display: inline-block; 
    width: 100%; 
} 

violino di lavoro: http://jsfiddle.net/5muarho3/3/