Ocultar un div parcialmente mostrado

¿Hay alguna manera de ocultar un div que se muestra parcialmente en JavaScript (o tal vez usando algo de magia CSS)?

Mi configuración tiene un div principal de ancho fijo con overflow: hidden y white-space: nowrap (para que los divs no fluyan a la siguiente línea). Esencialmente, no quiero que los divs secundarios (de ancho variable y display: inline-block) para pasar a la siguiente línea si se desbordan, ya que estropea el diseño.

Como los divs secundarios tienen un ancho variable y no se dividen en la siguiente 'línea' de divs, algunos de ellos están ocultos a la vista y otros solo se muestran parcialmente. Si están ocultos, está bien, pero los divs que se muestran parcialmente parecen tontos (contienen texto, por lo que a veces se muestra a medias).

Los divs secundarios se agregan mediante programación con JS en respuesta a los datos en tiempo real, por lo que no tengo forma de saber cuántos caben a medida que varían sus anchos. Solo quiero ocultar aquellos que fluyen sobre el borde del div (overflow: hidden) o se muestran parcialmente.

¿Hay una manera fácil de ocultar esos divs que se muestran parcialmente? Realmente no quiero consultar los anchos de los divs secundarios, ya que es necesario actualizar mucho otro contenido y no quiero ralentizar la actualización con consultas de propiedades DOM innecesarias.

<div style='overflow: hidden; white-space: nowrap; max-width: 500px'>
     <div style='display: inline-block'> some text </div>
     <div style='display: inline-block'> some text </div>
     <div style='display: inline-block'> some text </div>
     <div style='display: inline-block'> partially shown </div>
     <div style='display: inline-block'> hidden </div>
     <div style='display: inline-block'> hidden </div>
</div>

preguntado el 12 de junio de 14 a las 11:06

¿Tal vez podrías revisar las posiciones de los divs internos? api.jquery.com/posición -

Bueno, no veo ninguna otra propiedad que distinga los divs de los que hablas del resto, excepto el ancho, ¿verdad? -

¿Cuántos gastos generales tendría eso? Mi problema es que vuelvo a renderizar la página cada 200 ms; ya se ejecuta en el límite de utilizable en algunas tabletas. -

No estoy muy seguro. Podrías compararlo de alguna manera. Si no hay muchos divs, no debería ser un problema. -

@kidwon, tienes razón. Me preguntaba si había algún truco mágico de CSS que los ocultaría si se mostraran/ocultaran parcialmente.

2 Respuestas

Como mencioné en los comentarios, podrías usar el jQuery .position(). Entonces correrías a través de tu interior divs y revisa su top right posición contra su contenedor.

Algo alrededor de estas líneas:

CSS (solo para demostración)

div div {
  background-color: red;
  width: 130px;
}

Javascript (jQuery)

$(function() {
  $("div div").each(function(index, element) {
    // By adding the element width to its left position you have the right 
    // position, which is not provided by the jQuery .position() method.
    var rightPos = $(this).position().left + $(this).width();

    var containerWidth = $(this).parent().width();

    // If the element top right corner position is outside its parent right edge,
    // it's being partially displayed, so hide it and also its subsequent 
    // siblings.
    if (rightPos > containerWidth) {
      $(this).hide().nextAll().hide();

      // Break the loop to save resources.
      return false;
    }
  });    
});

De demostración

Respondido el 12 de junio de 14 a las 12:06

+1 Eso es lo que estoy tratando de lograr exactamente. Sin embargo, no quiero tocar demasiado el DOM (consultar los desplazamientos y anchos). En otra parte de la página tengo que crear/destruir potencialmente bastante de divs en rápida sucesión (cada 200 ms en el peor de los casos, son datos en tiempo real), lo que ralentiza todo lo suficiente como para que solo sea aceptable en tabletas (funciona bien en computadoras de escritorio) y quiero que funcione en tabletas en particular ... Supongo que esta puede ser la única solución en ausencia de trucos CSS. - Wojtek

Ese es un problema cuando necesitas jugar con el rendimiento del DOM. A menos que a alguien más se le ocurra una solución CSS, me temo que esa es la única forma que tiene. - emerson.marini

He editado ligeramente mi respuesta, ahora haciendo que los subsiguientes divs también desaparezcan y rompiendo el ciclo cuando el trabajo esté terminado. - emerson.marini

Además, podría adoptar un enfoque diferente, pero siguiendo el mismo concepto. Verificaría las posiciones de los divs en el momento en que los agrega al contenedor, sin ocultar los desbordados, pero simplemente sin agregarlos. - emerson.marini

Este enfoque no funcionaría, no creo: consultar el ancho del elemento DOM que aún no se ha agregado devuelve cero, por lo que no podemos verificar la posición de su borde derecho :( I' Aceptaré su respuesta si no se sugiere magia CSS, ya que es útil, incluso al sugerir que puede que no haya otra manera (aunque no es exactamente lo que estaba buscando). Wojtek

No hay una manera fácil de verificar si el contenido del contenedor excede el ancho, tendrá que consultar el ancho de los div secundarios y compararlo con el ancho del div principal.

Respondido el 12 de junio de 14 a las 11:06

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.