Jak zrobić "text-overflow: ellipsis" dla elementu "float: left" i "float: right" div?

mam wymagania projektowe wstęga posiada nagłówka, jak poniżej:Jak zrobić "text-overflow: ellipsis" dla elementu "float: left" i "float: right" div?

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

nagłówek zawiera: Gr 3 części A, B, C. DIV A pływak w lewo, a DIV B i C jest unoszą się w prawo. DIV A i DIV B mogą zawierać długi tekst. Tak więc przepełniony tekst jest obcinany jako elipsa. DIV C ma krótki tekst, którego zawartość nie powinna być obcięta.

Próbowałem zrobić HTML jak poniżej:

<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>

Tekst-przelewowy: wielokropek działa tylko jeśli DIV A i B mają szerokość DIV (w moim przypadku, ustawić je do 45%).

Jest jednak jeden problem z DIV C. Ponieważ szerokość DIV C może być różna w różnych lokalizacjach, nie możemy ustawić jej szerokości jawnie. Zawężając okno przeglądarki, element div C może zostać zawinięty do następnej linii. To wygląda źle.

Czy istnieje sposób, aby DIV A i DIV B płynęły odpowiednio w lewo i w prawo z elipsą przelewową, a jednocześnie DIV C może dostosować się do swojej najlepszej szerokości?

Źródło

2009-04-25 Morgan Cheng

Co trzeba zrobić tutaj jest zastosowanie margines div # c, która odpowiada szerokości div # A i div # B

Weźmy na przykład poniżej;

<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" />

Będziesz zauważyć, że dodałem dodatkowy 10px do każdej szerokości, to tylko w celu umożliwienia bardziej rozstawione pomiędzy elementami, oczywiście będzie trzeba także usunąć te idealnie również.

To da Ci dwie stałe kolumny po obu stronach i element środkowy, który zajmie dowolne wolne miejsce.

Źródło

2009-04-25 17:23:42 Phunky

w ten sposób, „centrum” jest popychany w dół do następnego linii, jeśli okno przeglądarki jest wąskie. –

Rzeczywiście, jest to bardzo prawdziwe, więc zalecane byłoby użycie minimalnej szerokości na kontenerze lub .DivC. Kiedykolwiek używasz pływaków, zawsze będziesz mógł zmienić rozmiar przeglądarki do punktu, w którym przerwie układ, chyba że w pewnym momencie użyjesz stałej szerokości. – Phunky

Ten jest bardzo stary (09 '), ale odpowiem dla tych, którzy pochodzą z wyszukiwania tak jak ja.

Ponieważ A i B mają po 40%, maksymalna wartość C wynosi 20%, ponieważ nagłówek ma wartość 100%. Dodaj więc do niego max-width:20%;, a C nie podzieli się na następny wiersz. Ale wtedy, gdy okno przeglądarki staje się wąskie, tekst będzie zawijany w razie potrzeby.

jeśli nie chcą ten problem, można dodać white-space: nowrap; które uczynią C tekst zachodzi na jeden w B.

Zobacz http://jsfiddle.net/fxLVQ/

Źródło

2013-04-22 12:09:29 RaphaelDDL

Jak zrobić "text-overflow: ellipsis" dla elementu "float: left" i "float: right" div?

Odpowiedz

Powiązane problemy