De forma predeterminada, se debe mostrar la versión short del elemento (una línea con ...). Todos los elementos deben mostrarse siempre en la misma versión (short o long).

  1. Si todos están en el modo de versión short: al hacer clic en un elemento se debe mostrar una versión long de cada elemento, la altura de todos los elementos debe ser la misma y debe ser igual a la altura del elemento más alto .
  2. Si todos están en el modo de versión long: al hacer clic en un elemento, se debería mostrar una versión short de cada elemento (una línea con ...).

Creé un código:

                $(document).on("click", ".elementText", function (e) {
                    if($( this ).css( "-webkit-line-clamp" ) == "1"){
                        $(this).css("-webkit-line-clamp", "99");
                        var elementHeight = $(this).css( "height" );
                        $($(this).parent()).find(".elementText").each(function(){
                            $(this).css("-webkit-line-clamp", "99");
                            if($(this).css( "height" ) < elementHeight){
                                $(this).height(elementHeight);
                            }
                        });
                    }
                    else{
                        $(this).css("-webkit-line-clamp", "1");
                        var elementHeight = $(this).css( "height" );
                        $($(this).parent()).find(".elementText").each(function(){
                            $(this).css("-webkit-line-clamp", "1");
                            if($(this).css( "height" ) > elementHeight){
                                $(this).height(elementHeight);
                            }
                        });
                    }
                    
                });             
            
.elementText{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  cursor: pointer;
  padding-left: 5px;
  width:200px;
  background:yellow;
  float:left;
  margin:5px;
}           
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="elementText">
  Contrary to popular belief, Lorem Ipsum is not simply random text
</div>

<div class="elementText">       
  It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.      
</div>

<div class="elementText">           
  The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here',
</div>

Funciona si el clic make long (el primer clic después de cargar la página) y el clic make short (el segundo clic después de cargar la página) están en el mismo elemento. El problema existe si el clic make long (el primer clic después de cargar la página) y el clic make short (el segundo clic después de cargar la página) están en los diferentes elementos. Por ejemplo, el clic make long está en el tercer elemento y el clic make short está en el primer elemento. Algo sale mal y el primer y el segundo texto no se cortan correctamente.

¿Por qué no funciona y qué debo cambiar para solucionar este problema?

1
Rash J 9 ago. 2020 a las 18:23

2 respuestas

La mejor respuesta

El problema principal fue: estableciste la altura para la versión larga / corta en la altura del elemento seleccionado. Pero has ampliado todos y buscas la altura máxima y estableces la altura en un segundo paso para todos ellos en max .
Para obtener la versión corta, establezca la altura en auto , por lo que todos mostrarán la 1 línea necesaria. Si realmente después de esto hubiera diferencias en la altura debido a diferentes tamaños de fuente, podría hacer aquí el paso con max después nuevamente.

No estoy seguro de si esto es realmente necesario, pero puede probarlo: puede usar una variable global y almacenar allí si se muestra long o no. En cada cambio, haga clic en alternar la variable larga. Si lo desea, puede usar en su lugar una clase que está agregando y eliminando a un elemento HTML.

var long = false;

$(document).on("click", ".elementText", function (e) {
             if(!long){
                long=true;
                let max = 0;
                $(this).css("-webkit-line-clamp", "99");
                $($(this).parent()).find(".elementText").each(function(){
                    $(this).css("-webkit-line-clamp", "99");
                    max = Math.max(max, parseInt($(this).css( "height" )) );
                });
                $($(this).parent()).find(".elementText").each(function(){
                    $(this).height(max);
                });
            }
            else{
                long=false;
                $(this).css("-webkit-line-clamp", "1");
                $(this).height('auto');
                $($(this).parent()).find(".elementText").each(function(){
                    $(this).css("-webkit-line-clamp", "1").height('auto');
                });
            }
        });  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head>
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <style> 
            .elementText{
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
                cursor: pointer;
                padding-left: 5px;
                width:200px;
                background:yellow;
                float:left;
                margin:5px;
            }           
        </style>        
    </head>
        <body>
    
        <div class="elementText">
            Contrary to popular belief, Lorem Ipsum is not simply random text
        </div>
        
        <div class="elementText">       
            It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.        
        </div>
        
        <div class="elementText">           
            The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here',
        </div>
</body>
1
Sascha 9 ago. 2020 a las 16:18

Para este escenario, realmente te aconsejaría que uses clases. Más bien clases toggle que configurar el CSS real la mayor parte del tiempo.

La idea aquí era obtener siempre el height más grande de los 3 elementos, que se basa estrictamente en su contenido después de expandirlos. Entonces ahí es donde estaba el problema.

Aquí está mi enfoque sobre esto:

(function(){
  var display_element = $(".elementText");
  
  function getLargestHeight(elemArray)
  {
    // if there's no elements parsed, then no elements are expanded
    if(elemArray.length <= 0)
      return "auto";
      
    var rempResult = 0;
    
    $.each(elemArray,(i, e) => {
      let _e_height = parseInt($(e).css("height").slice(0,-2));
      
      if(_e_height > rempResult)
        rempResult = _e_height;
    });
    
    return rempResult + "px";
  }
  
  display_element.on("click", (e) => {
    if(display_element.hasClass("expanded"))
      display_element.removeClass("expanded");
    else
      display_element.addClass("expanded");
     
    $.each(display_element, (i, e) => {
      $(e).css("height", getLargestHeight($(".expanded")));
    });
  });
})();
.elementText{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  cursor: pointer;
  padding-left: 5px;
  width:200px;
  background:yellow;
  float:left;
  margin:5px;
  height: auto;
}

.expanded
{
  -webkit-line-clamp: 99;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="elementText">
  Contrary to popular belief, Lorem Ipsum is not simply random text
</div>

<div class="elementText">       
  It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.      
</div>

<div class="elementText">           
  The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here',
</div>
0
Mosia Thabo 9 ago. 2020 a las 17:47