¿Cómo hacer "text-overflow: ellipsis" para ambos "float: left" y "float: right" div?

I tener un requisito de diseño web para tener un encabezado como esto:¿Cómo hacer "text-overflow: ellipsis" para ambos "float: left" y "float: right" div?

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

La cabecera tiene 3 partes: Div A, B, C. El DIV A es flotador a izquierda, mientras que DIV B y C es flotar a la derecha. DIV A y DIV B pueden contener texto largo. Entonces el texto desbordado se trunca como puntos suspensivos. DIV C tiene texto corto, su contenido no se debe truncar.

he intentado hacer HTML, como a continuación:

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

El texto desbordamiento: puntos suspensivos sólo funciona si DIV DIV A y B tienen el ancho (en mi caso, yo las puse a ser de 45%).

Sin embargo, hay un problema con DIV C. Dado que el ancho de DIV C puede ser diferente en ubicaciones diferentes, no podemos establecer su ancho de forma explícita. Al reducir la ventana del navegador, el div C se puede ajustar a la siguiente línea. Esto se ve mal.

¿Hay alguna forma de hacer que DIV A y DIV B floten hacia la izquierda y hacia la derecha respectivamente con puntos suspensivos de rebote, mientras que al mismo tiempo DIV C puede adaptarse a su mejor ancho?

Fuente

2009-04-25 Morgan Cheng

Lo que hay que hacer aquí es aplicar un margen a DIV # c, que coincide con el ancho de la div # a # b div y

Tome el siguiente, por ejemplo;

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

Usted habrá notado que he añadido 10px extra para cada ancho, esto es sólo para permitir más espacio entre los elementos, por supuesto, usted también tendrá que limpiar estos idealmente también.

Esto le daría dos columnas fijas en cada lado y un elemento central que ocuparía cualquier espacio libre.

Fuente

2009-04-25 17:23:42 Phunky

De esta manera, el "centro" se empuja hacia abajo a la siguiente línea si la ventana del navegador es estrecha. –

De hecho, eso es muy cierto, por lo que se recomienda el uso de un ancho mínimo en el contenedor o .DivC. Cuando utilice flotadores, siempre podrá cambiar el tamaño del navegador hasta un punto en que romperá el diseño, a menos que use anchos fijos en algún momento. – Phunky

Este es muy viejo (09 ') pero voy a responder por aquellos que vienen de búsqueda como lo hice.

Dado que A y B tienen un 40% cada una, la C máxima tendría un 20%, ya que el encabezado es el 100%. Así que añada max-width:20%; y C no irá a la siguiente línea. Pero luego, cuando la ventana del navegador se estrecha, el texto se ajustará cuando sea necesario.

SI usted no desea este comportamiento, puede agregar white-space: nowrap; lo que hará que el texto se superponen C el de B.

Ver http://jsfiddle.net/fxLVQ/

Fuente

2013-04-22 12:09:29 RaphaelDDL

¿Cómo hacer "text-overflow: ellipsis" para ambos "float: left" y "float: right" div?

Respuesta

Cuestiones relacionadas