Necesito ayuda para escribir una función con varias declaraciones if (a menos que haya un método mejor). Básicamente, quiero truncar la longitud del texto según el tamaño de la ventana. Entonces, si la ventana gráfica es inferior a 400 px y la longitud del texto es superior a 35, entonces trunca usando este método a continuación...
$('option').each(function () { var text = $(this).text(); if (text.length > 35) { text = text.substring(0, 35) + '...'; $(this).text(text); } });La función para cambiar el tamaño de la ventana (básicamente combinar arriba con abajo):
$(document).ready(function(){ if($( window ).width() < 400){ //do something; }else{ //do something else; } }); $( window ).resize(function() { if($( window ).width() < 400){ //do something; }else{ //do something else; } });Investigué un poco más y lo hice funcionar con este código:
$(document).ready(myfunction); $(window).on('resize',myfunction); $('option').each(myfunction); function myfunction() { var text = $(this).text(); if (text.length > 35 == ($(window)).width() < 400) { text = text.substring(0, 35) + '...'; $(this).text(text); } }Me pregunto si/cómo una función matemática podría calcular el ancho de la ventana gráfica como un rango y cambiar el truncamiento hasta un punto de interrupción máximo.
Terminé respondiendo mi propia pregunta. Entonces, lo estoy publicando aquí en caso de que alguien más tenga una necesidad similar o pueda mejorar lo que he hecho...
Básicamente, estoy truncando los cuadros de opciones de selección aplicando la longitud de los caracteres y el ancho de la ventana. Esto evita que el texto de opción muy largo fluya más allá de su contenedor y más allá de la pantalla. Estoy seguro de que hay una forma más eficiente de codificar esto, pero mis pruebas parecen tener éxito, lo que funciona por ahora.
/** * Truncate lengthy option text in select boxes */ var defaultString=$('option').text(); function checkWidth() { if($(window).width() > 600){ $('option').each(function(i){ len=$(this).text().length; if(len>65) { $(this).text($(this).text().substr(0,65)+'...'); } }); return false; } if ($(window).width() > 451 && $(window).width() < 599 ) { $('option').each(function(i){ len=$(this).text().length; if(len>50) { $(this).text($(this).text().substr(0,50)+'...'); } }); return false; } if($(window).width() < 450){ $('option').each(function(i){ len=$(this).text().length; if(len>35) { $(this).text($(this).text().substr(0,35)+'...'); } }); return false; } } checkWidth(); $(window).resize(checkWidth); $(document).ready(checkWidth);Las últimas tres líneas vinculan 'checkWidth' y 'cambiar tamaño' de la ventana (que también puede ser 'ancho' o 'alto') dependiendo de lo que esté logrando. El enlace debe realizarse antes de poder ejecutar los eventos de función.