Lo que estoy tratando de lograr. Muestra de imagen aquí
Hola chicos, todavía estoy aprendiendo y tratando de truncar un texto largo pero con pocas condiciones. Digamos que tengo una matriz de 5 palabras, si el texto es demasiado largo, deberá truncar el texto para acomodar el ancho del contenedor. Pero quería que cortara toda la palabra en lugar de solo las letras. Como objeto de ejemplo de [uno, dos, tres, cuatro, cinco]
Uno, dos, tres, ... 2 (contra) Quiero esto
Uno, dos, tres, cuatro... 1 (contra) No quiero esto
A continuación se muestra lo que he intentado, pero no estoy seguro de a dónde ir a continuación para hacer que el contador sea dinámico en función del número de texto truncado en lugar de la longitud de una matriz.
function App() { const numbers = ["one", "two", "three", "four", "five"]; const testStyle = { display: "flex", justifyContent: "space-between", background: "#D0D0D0", padding: "6px 8px", width: "150px", whiteSpace: "nowrap", }; const truncatedStyle = { textOverflow: "ellipsis", overflow: "hidden", }; return ( <div className="App"> <div style={testStyle}> <div style={truncatedStyle}> {numbers.map((n, i) => ( <span> {n} {i === 4 ? "" : ", "} </span> ))} </div> <div style={{ background: "black", color: "white", padding: "2px 4px" }} > {numbers.length} </div> </div> </div> ); }Una cosa que puede hacer es usar useRef y obtener el ancho de esos tramos, luego verifíquelo en una variable si es mayor que 150px . si no, agregue el tramo, si es así, agregue , ... luego agregue el ancho del tramo a la variable.
Puede modificar **function App()** usando Vanilla Javascript, puede lograr el mismo resultado en forma de cadena y luego, a través de la interpolación de cadenas, puede representarlo en el HTML según las mejores prácticas de codificación, toda la parte lógica debe concluirse en JS y HTML debe usarse solo para ver/representar los datos.
Ejemplo -
function App() { var s = ""; var c = 0; const numbers = ["one", "two", "three", "four", "five"]; for(var i =0 ; i< numbers.length;i++){ i>2 ? c++ : s = s+numbers[i]+", "; } return numbers.length > 3 ? s+".." + c : s; }