Come rendere "overflow di testo: puntini di sospensione" sia per "float: left" e "float: right" div?

ho un requisito web design avere un'intestazione simile:Come rendere "overflow di testo: puntini di sospensione" sia per "float: left" e "float: right" div?

+-------------------------------------------------------------+ 
| +---------------------+ +-------++------------------------+| 
| | float left DIV A | | DIV C || float right DIV B  || 
| +---------------------+ +-------++------------------------+| 
+-------------------------------------------------------------+

L'intestazione ha 3 parti: Div A, B, C. Il DIV A è float a sinistra, mentre DIV B e C è fluttuare a destra. DIV A e DIV B potrebbero contenere testo lungo. Quindi il testo overflow viene troncato come ellissi. DIV C ha un testo breve, il suo contenuto non deve essere troncato.

ho cercato di rendere HTML come di seguito:

<html> 
    <head> 
     <style> 
      .header 
      { 
       width: 100%; 
       border: 2px red; 
       overflow: hidden; 
      } 
      .DivA 
      { 
       float: left; 
      } 
      .DivC 
      { 
       float: right; 
       white-space:nowrap; 
      } 
      .DivB 
      { 
       float: right; 
      } 
      .clear 
      { 
       clear: both; 
      } 
      .DivA, .DivB 
      { 
       width: 40%; 
       overflow: hidden; 
       text-overflow: ellipsis; 
       white-space: nowrap; 
      } 
     </style> 
    </head> 
    <body> 
     <div class="header"> 
      <div class="DivA"> 
       Hello world 1 Hello world 2 Hello world 3 
       Hello world 1 Hello world 2 Hello world 3 
       Hello world 1 Hello world 2 Hello world 3 
      </div> 
      <div class="DivB"> 
       Good bye Good bye 
       Good bye Good bye 
       Good bye Good bye 
      </div> 
      <div class="DivC"> 
       No Ellipsis 
      </div> 
      <div class="clear"> 
      </div> 
     </div> 
    </body> 
</html>

Il testo-overflow: puntini di sospensione funziona solo se DIV A e B hanno DIV larghezza (nel mio caso, ho impostato loro di essere il 45%).

Tuttavia, c'è un problema in DIV C. Poiché la larghezza di DIV C potrebbe essere diversa nella localizzazione diversa, non è possibile impostarne esplicitamente la larghezza. Quando si restringe la finestra del browser, il div C può essere spostato sulla riga successiva. Questo sembra male.

C'è un modo per rendere DIV A e DIV B flottante rispettivamente verso sinistra e destra con ellissi di sfioramento, mentre DIV C può adattarsi alla sua larghezza migliore?

fonte

2009-04-25 Morgan Cheng

Quello che dovete fare qui è di applicare un margine al div # C, che corrisponde la larghezza del div # ae div # b

Prendete l'esempio di seguito;

<style> 
.DivA {width:250px; float:left;} 
.DivB {width:150px; float:right;} 
.DivC {margin-left:260px; margin-right:160px;} 
</style> 

<div class="DivA" /> 
<div class="DivB" /> 
<div class="DivC" />

Avrete notato che ho aggiunto 10px in più per ogni larghezza, questo è solo per consentire la più distanziati tra gli elementi, naturalmente sarà anche necessario cancellare questi idealmente anche.

Questo quindi ti darà due colonne fisse su entrambi i lati e un elemento centrale che occuperebbe qualsiasi spazio libero.

fonte

2009-04-25 17:23:42 Phunky

In questo modo, il "centro" è spinto verso il basso per il prossimo linea se la finestra del browser è stretta. –

In effetti, è molto vero quindi si consiglia l'uso di una larghezza minima sul contenitore o su .DivC. Quando usi i float, sarai sempre in grado di ridimensionare il browser fino al punto in cui interromperà il layout, a meno che non usi larghezze fisse a un certo punto. – Phunky

Questo è molto vecchio (09 ') ma risponderò per coloro che vengono dalla ricerca come ho fatto io.

Poiché A e B sono il 40% ciascuno, il C massimo avrà il 20%, poiché l'intestazione è 100%. Quindi aggiungi max-width:20%; e C non si interromperà nella riga successiva. Ma poi, quando la finestra del browser si restringe, il testo si avvolgerà quando necessario.

SE non si desidera questo comportamento, è possibile aggiungere white-space: nowrap; che renderà il testo C si sovrappongono l'uno in B.

Vedere http://jsfiddle.net/fxLVQ/

fonte

2013-04-22 12:09:29 RaphaelDDL

Come rendere "overflow di testo: puntini di sospensione" sia per "float: left" e "float: right" div?

risposta

Problemi correlati