Larghezza massima dinamica per il testo

Quindi diciamo che ho questo markup;Larghezza massima dinamica per il testo

<div> 
    <span>Text one</span> 
    <span class="sticky">ABC</span> 
</div> 
<div> 
    <span>Some other text</span> 
    <span class="sticky">DEF</span> 
</div> 
<div> 
    <span>Lorem dolor sit amet lorem ipsum dolor</span> 
    <span class="sticky">GHI</span> 
</div>

Quale sarebbe - con il CSS di accompagnamento - fornire un risultato come nella foto qui sotto.

Tuttavia, il problema si verifica quando il testo nel primo span è più lungo della larghezza assegnata del div. Normalmente ciò che accade è solo normale avvolgimento del testo; il secondo span è urtato alla fine della seconda riga.

Tuttavia, voglio che questo elemento sia solo una riga. Ora, ovviamente per raggiungere questo, lo fai;

white-space: nowrap; 
overflow: hidden;

Ma ciò che accade è il secondo span scompare nell'oblio, come è aspirato dal lunghezza del testo nel primo span.

Quello che vorrei ottenere è ciò che è illustrato nel terzo esempio di seguito. Quando il contenuto del primo span è troppo lungo per essere visualizzato, text-overflow: ellipsis; taglierebbe la stringa con un punto-punto-punto e il secondo span verrebbe inviato all'estrema destra (padding del div consentito).

Essenzialmente, la pseudo max-width del primo span sarebbe uguale alla larghezza del div, escludendo la sua padding e sottraendo la larghezza di span.sticky, qualunque essa sia (come il contenuto di esso può variare, quindi l'ampiezza non è impostato).

Non so se max-width è in realtà la strada da percorrere quando mi avvicino a qualcosa di simile, ma è quello che posso usare per descrivere al meglio il comportamento che voglio.

Esiste un metodo non JS per raggiungere questo obiettivo?

Example

fonte

2013-01-07 Emphram Stavanger

Questo può sicuramente, e dovrebbe essere fatto in CSS. Applicare una larghezza fissa e un'altezza fissa sulla prima campata. L'altezza impedisce di allungare a più linee. L'estensione .sticky può quindi essere posizionata in seguito. Questo può anche essere reso fluido, usando percentuali o em. Qualcosa da considerare, non conosco il contesto di 'ABC', 'DEF', ma potrebbero essere applicati meglio usando a: before o: after pseudo class se sono puramente visivi e non elementi strutturali.

Ecco un rapido esempio:

div { 
    width: 200px; /* some amount that you set */ 
} 
span:not(.sticky) { /* can use another selector, just wanted it to be exceptionally clear what i was referring to here */ 
    display: inline-block; /* so height and width actually take affect */ 
    max-width: 80%; 
    height: 1em; /* so overflow hidden works and keeps text on one row */ 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; /* important to show ellipsis, or words will just be broken off */ 
} 
span.sticky { 
    display: inline-block; 
    width: 20%; 
}

Se volete vedere questo lavoro su un sito vivo, ho fatto questo disegno su moolta.com. Clicca su "fai una sfida" e apri il modale per scegliere un amico. I li dentro l'elenco a discesa sono ciò di cui sto parlando. Dovevano diventare elipsis e avere un pulsante li seguono, senza linee di rottura

fonte

2013-01-08 22:24:52 DMTintner

Credo che per renderlo pienamente dinamica, potrebbe essere migliorato con un piccolo JS dohickey che calcolate l'attuale 'max-width' per la prima 'span' in base alla larghezza di' div' e alla larghezza effettiva del contenuto di 'sticky', per la mancanza di funzionalità simili nei CSS. Ma è un ottimo inizio. –

Giocherellando per creare questo; http://jsfiddle.net/GEzXU/ - i pareri su come questo approccio sia intelligente sono accolti favorevolmente. –

C'è un modo per farlo funzionare usando una larghezza dinamica per il div esterno? – crobicha

<html> 
    <head> 
    <style> 
     .left { 
     max-width: 200px; 
     display: inline-block; 
     overflow: hidden; 
     text-overflow: ellipsis; 
     white-space: nowrap; 
     } 

     .right { 
     float: right; 
     } 
    </style> 
    </head> 
    <body> 
    <div class="left"> 
     <div class="right">FOO</div> 
     Lorem 
    </div> 
    <br /> 
    <div class="left"> 
     <div class="right">FOO</div> 
     Lorem ipsum 
    </div> 
    <br /> 
    <div class="left"> 
     <div class="right">FOO</div> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit 
    </div> 
    </body> 
</html>

fonte

2014-03-04 00:38:24

Larghezza massima dinamica per il testo

risposta

Problemi correlati